/* ==========================================================================
   Tokens del sistema de diseño de Nimbalu.
   Ningún color, tamaño, radio, sombra ni duración se escribe fuera de este archivo.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities, overrides;

/* --- Fuentes autoalojadas (OFL, subset latino) --- */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Respaldos métricos: mientras carga la fuente web, el texto ocupa lo mismo.
   Valores medidos con tools/font-metrics.html (Chrome, abril de 2026). */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 84.95%;
  ascent-override: 115.36%;
  descent-override: 30.61%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 100.59%;
  ascent-override: 96.43%;
  descent-override: 24.85%;
  line-gap-override: 0%;
}

/* --- Propiedades animables --- */

@property --level {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --breath {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --header-line {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@layer tokens {
  /* --- Color ---
     Contraste WCAG verificado en /estilos (se calcula desde este archivo).
     Todo texto pasa AA (4.5:1) en los dos temas sobre bg, bg-raised y bg-sunken:
     ink, ink-soft, ink-faint, moss y clay. Texto sobre --moss: usar --bg. */

  :root {
    color-scheme: light dark;
  }

  :root[data-theme="tarde"] { color-scheme: light; }
  :root[data-theme="noche"] { color-scheme: dark; }

  :root {
    --bg:        light-dark(oklch(95.2% 0.014 80),  oklch(23.5% 0.012 160));
    --bg-raised: light-dark(oklch(97.6% 0.009 80),  oklch(27% 0.012 160));
    --bg-sunken: light-dark(oklch(91.5% 0.018 80),  oklch(20% 0.010 160));
    --ink:       light-dark(oklch(28% 0.012 70),    oklch(91.5% 0.016 85));
    --ink-soft:  light-dark(oklch(45% 0.018 70),    oklch(76% 0.016 85));
    --ink-faint: light-dark(oklch(50% 0.020 75),    oklch(70% 0.012 90));
    --line:      light-dark(oklch(87% 0.020 80),    oklch(33% 0.012 160));
    --moss:      light-dark(oklch(50% 0.055 130),   oklch(74% 0.060 130));
    --moss-soft: light-dark(oklch(89% 0.030 130),   oklch(32% 0.025 130));
    --clay:      light-dark(oklch(50% 0.090 50),    oklch(72% 0.080 50));
    --focus: var(--moss);

    /* Familias de sonido: solo en el nivel de la fila, la ventana y los puntos de la barra. */
    --hue-agua: 230;
    --hue-naturaleza: 135;
    --hue-lugares: 55;
    --hue-casa: 85;
    --hue-ruidos: 160;
    --family-c: 0.05;

    /* Escena de la ventana: luz de tarde o de noche. */
    --scene-light: light-dark(oklch(93% 0.045 75), oklch(40% 0.03 240));
    --scene-far:   light-dark(oklch(84% 0.022 95), oklch(29% 0.014 170));

    --veil: color-mix(in oklch, var(--bg) 70%, transparent);
    --veil-pause: color-mix(in oklch, var(--bg) 20%, transparent);
    --fill-alpha: 14%;

    /* La única sombra del sitio. La variante -up es la misma, espejada, para lo que flota desde abajo. */
    --shadow-float: 0 1px 0 oklch(0% 0 0 / .04), 0 12px 32px -16px oklch(20% 0.02 70 / .28);
    --shadow-float-up: 0 -1px 0 oklch(0% 0 0 / .04), 0 -12px 32px -16px oklch(20% 0.02 70 / .28);
    --backdrop: oklch(20% 0.02 70 / .32);

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .16 0 0 0 0 .14 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  }

  /* Color de familia: se declara donde se define --hue, para que la variable se resuelva ahí. */
  [data-family="agua"]       { --hue: var(--hue-agua); }
  [data-family="naturaleza"] { --hue: var(--hue-naturaleza); }
  [data-family="lugares"]    { --hue: var(--hue-lugares); }
  [data-family="casa"]       { --hue: var(--hue-casa); }
  [data-family="ruidos"]     { --hue: var(--hue-ruidos); --family-c: 0.012; }
  [data-family] {
    --family: light-dark(oklch(62% var(--family-c) var(--hue)), oklch(74% var(--family-c) var(--hue)));
  }

  /* Noche: grano claro al 2 %. light-dark() no sirve para imágenes. */
  :root[data-theme="noche"] {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .91 0 0 0 0 .89 0 0 0 0 .84 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
  }

  /* Respaldo hex para navegadores sin light-dark(). */
  @supports not (color: light-dark(white, black)) {
    :root,
    :root[data-theme="tarde"] {
      --bg: #F4EEE5; --bg-raised: #FAF7F0; --bg-sunken: #E9E2D6;
      --ink: #2D2823; --ink-soft: #5C544B; --ink-faint: #6A6257; --line: #DBD3C6;
      --moss: #596A48; --moss-soft: #D4DFCB; --clay: #8C5331;
      --scene-light: #F6E7CF; --scene-far: #D6D1BE;
    }
    :root[data-theme="noche"] {
      --bg: #19201C; --bg-raised: #222824; --bg-sunken: #121714;
      --ink: #E8E2D7; --ink-soft: #B6B0A6; --ink-faint: #A19E96; --line: #303733;
      --moss: #9EB38B; --moss-soft: #2F3628; --clay: #D29A7C;
      --scene-light: #34414F; --scene-far: #222B27;
    }
    [data-family] { --family: oklch(62% var(--family-c) var(--hue)); }
    [data-theme="noche"] [data-family] { --family: oklch(74% var(--family-c) var(--hue)); }
  }

  :root {
    /* --- Tipografía --- */
    --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
    --font-ui: "Instrument Sans", "Instrument Sans Fallback", Arial, sans-serif;
    --display-axes: "SOFT" 100, "WONK" 0;
    --display-weight: 380;
    --display-weight-strong: 420;
    --ui-weight: 400;
    --ui-weight-strong: 500;

    --text-xs:   0.8125rem;
    --text-sm:   0.9375rem;
    --text-md:   clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --text-lg:   clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
    --text-xl:   clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
    --text-hero: clamp(2.2rem, 1.4rem + 3.6vw, 4.25rem);
    --text-clock: clamp(4rem, 14vw, 12rem);

    --leading-body: 1.55;
    --leading-display: 1.08;
    --leading-tight: 1.3;
    --tracking-display: -0.015em;
    --tracking-caps: 0.04em;
    --measure: 64ch;

    /* --- Espacio --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;
    --space-9: 112px;

    /* --- Forma --- */
    --radius-xs: 4px;     /* tracks de fader */
    --radius-sm: 8px;     /* botones */
    --radius-md: 12px;    /* barra, menús */
    --radius-lg: 20px;    /* solo la ventana */
    --radius-pill: 999px; /* solo chips y el botón de play */
    --border: 1px;
    --focus-width: 2px;
    --focus-offset: 2px;

    /* --- Medidas de componentes --- */
    --container: 1200px;
    --gutter: 16px;
    --header-h: 56px;
    --player-h: 64px;
    --tap: 44px;
    --icon: 24px;
    --icon-sm: 18px;
    --row-h: 52px;
    --play-big: 72px;
    --play-ring: 84px;
    --dot: 8px;
    --master-w: 120px;
    --slider-track: 4px;
    --slider-thumb: 16px;
    --popover-w: 280px;
    --sheet-max: 85dvh;
    --handle-w: 36px;
    --ad-h: 250px;
    --ad-ins-w: 300px;
    --ad-ins-h: 250px;
    --popover-center-w: 26rem;
    --window-min-h: 22rem;
    --intrinsic-block: 640px;
    --chip-h: 36px;
    --mask-edge: 24px;
    --preview-h: 72px;
    --logo-h: 28px;
    --logo-h-sm: 20px;
    --sheet-row-h: 56px;
    --scroll-room: 220px; /* alto fijo que acompaña a la ventana en desktop: intenciones y márgenes */
    --z-header: 30;
    --z-player: 40;

    /* --- Movimiento --- */
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    --ease-breath:   cubic-bezier(0.37, 0, 0.27, 1);
    --ease-settle: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
      0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);

    --dur-1: 120ms;  /* hover, foco */
    --dur-2: 240ms;  /* toggles, sliders */
    --dur-3: 420ms;  /* entrada y salida de elementos */
    --dur-4: 800ms;  /* cambios de escena, tema */
    --dur-theme: 300ms;
    --dur-reveal: 700ms;
    --dur-pulse: 1400ms;
    --dur-highlight: 1000ms;
    --breath-amp: 0.08;
  }

  @media (min-width: 768px) {
    :root { --gutter: 24px; }
  }

  @media (min-width: 1024px) {
    :root {
      --gutter: 40px;
      --player-h: 72px;
      --ad-h: 90px;
      --ad-ins-w: 728px;
      --ad-ins-h: 90px;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    :root {
      --veil: color-mix(in oklch, var(--bg) 94%, transparent);
      --backdrop: oklch(20% 0.02 70 / .6);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-1: 0ms;
      --dur-2: 120ms;
      --dur-3: 120ms;
      --dur-4: 120ms;
      --dur-pulse: 0ms;
      --breath-amp: 0;
    }
  }
}