/* ==========================================================================
   URSUS · Design tokens · v1.0
   Fuente: Brand Guidelines v1.1, kit 04_Tokens y Plano maestro de la web.

   Niveles:
   1. Primitivos de marca (valores literales, nunca se usan en componentes)
   2. Semánticos de superficie (navy · marfil · noche), con modo oscuro
   3. Tipografía, espacio, layout, forma y movimiento
   ========================================================================== */

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

@layer tokens {
  :root {
    color-scheme: light dark;

    /* ---- 1. Primitivos de marca (Guidelines p. 05) ----------------------- */
    --ursus-navy:  #062B5B;  /* Ursus Navy  · hace de "negro" de la marca     */
    --ursus-night: #03172F;  /* Azul noche  · plano maestro: modo oscuro, pie  */
    --ursus-slate: #45617E;  /* Slate       · texto secundario sobre marfil    */
    --ursus-ivory: #F7F6F2;  /* Ivory       · hace de "blanco" de la marca     */
    --ursus-gold:  #CB911D;  /* Ursus Gold  · máx. 5 % de superficie           */

    /* Derivados por mezcla (no son tonos nuevos; contraste verificado) */
    --ursus-dusk:  color-mix(in srgb, var(--ursus-navy) 50%, var(--ursus-night)); /* ≈ #052145 · marfil en modo oscuro */
    --ursus-ivory-muted-on-navy:  color-mix(in srgb, var(--ursus-ivory) 72%, var(--ursus-navy));  /* 7,35:1 */
    --ursus-ivory-muted-on-night: color-mix(in srgb, var(--ursus-ivory) 72%, var(--ursus-night)); /* 8,99:1 */
    --ursus-navy-rule-on-ivory:   color-mix(in srgb, var(--ursus-navy) 18%, var(--ursus-ivory));  /* solo líneas */
    --ursus-ivory-rule-on-navy:   color-mix(in srgb, var(--ursus-ivory) 16%, var(--ursus-navy));  /* solo líneas */

    /* ---- 2. Tipografía (Plano maestro p. 43-49) ------------------------- */
    --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
    --font-text:    "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, sans-serif;
    --font-quote:   "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

    --weight-display: 350;  /* Newsreader optical size: autoridad serena sin rigidez */
    --weight-text:    400;  /* Hanken Grotesk: regular 18px */
    --weight-strong:  500;  /* tope 600; nunca 700+ */

    /* Escala de cuarta perfecta (×1,333) desde 18 px = 1.125rem */
    --step--1: 0.844rem;                                      /* 13,5 px · notas      */
    --step-0:  1.125rem;                                      /* 18 px   · cuerpo     */
    --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);      /* 20→24   · H3         */
    --step-2:  clamp(1.6rem, 1.38rem + 0.9vw, 2rem);          /* 26→32   · H2 pequeño */
    --step-3:  clamp(2rem, 1.6rem + 1.6vw, 2.666rem);         /* 32→43   · H2         */
    --step-4:  clamp(2.4rem, 1.8rem + 2.6vw, 3.553rem);       /* 38→57   · H1 interior*/
    --step-5:  clamp(3rem, 1.6rem + 5.2vw, 6rem);             /* 48→96   · hero       */

    --leading-display: 1.04;
    --leading-heading: 1.12;
    --leading-text:    1.6;
    --tracking-display: -0.012em;
    --tracking-label:   0.12em;   /* etiquetas de < 3 palabras, con moderación */
    --measure: 68ch;              /* < 75 caracteres por línea */

    /* ---- 3. Espacio (base 4 px) y ritmo de sección "tipo Apple" --------- */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
    --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
    --section-pad:  clamp(5rem, 2.5rem + 9vw, 11rem);   /* 80→176 px: aire generoso */
    --section-gap:  clamp(2.5rem, 1.5rem + 4vw, 5rem);

    /* ---- Layout -------------------------------------------------------- */
    --container: 76rem;                         /* 1216 px */
    --container-wide: 90rem;                    /* 1440 px */
    --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 3rem);
    --header-h: 5.5rem;
    --header-h-compact: 4.5rem;

    /* ---- Forma --------------------------------------------------------- */
    --radius-control: 3px;                      /* 2–4 px; sin tarjetas redondeadas */
    --rule: 1px;
    --ursus-cut: 60deg;                         /* diagonal de la marca */
    --ursus-cut-run: 0.5774;                    /* 1/tan(60°): desplazamiento por unidad de altura */

    /* ---- Movimiento: calidad, no espectáculo ---------------------------- */
    --ease-serene: cubic-bezier(0.22, 0.61, 0.36, 1);  /* sin rebote */
    --ease-draw:   cubic-bezier(0.65, 0, 0.35, 1);
    --dur-page:   300ms;   /* View Transitions */
    --dur-quick:  400ms;
    --dur-base:   550ms;
    --dur-slow:   700ms;
    --dur-intro: 1400ms;   /* único momento orquestado: < 1,5 s */

    /* ---- Capas --------------------------------------------------------- */
    --z-header: 50;
    --z-menu:   60;
    --z-skip:   100;
  }

  /* ---- Superficies -------------------------------------------------------
     Cada sección declara data-surface. Las superficies navy y noche fuerzan
     color-scheme: dark; la marfil sigue la preferencia del sistema y en modo
     oscuro pasa a "dusk" (base azul noche, texto marfil, como pide el plano).
     El dorado como texto solo existe donde el contraste lo permite.        */
  :where([data-surface="ivory"]) {
    --surface-bg:         light-dark(var(--ursus-ivory), var(--ursus-dusk));
    --surface-fg:         light-dark(var(--ursus-navy),  var(--ursus-ivory));
    --surface-fg-muted:   light-dark(var(--ursus-slate), var(--ursus-ivory-muted-on-navy));
    --surface-rule:       light-dark(var(--ursus-navy-rule-on-ivory), var(--ursus-ivory-rule-on-navy));
    --surface-accent-rule: var(--ursus-gold);                                   /* líneas: siempre */
    --surface-accent-text: light-dark(var(--ursus-navy), var(--ursus-gold));    /* dorado nunca sobre marfil */
    --surface-focus:      light-dark(var(--ursus-navy), var(--ursus-gold));
    --btn-bg:  light-dark(var(--ursus-navy), var(--ursus-ivory));
    --btn-fg:  light-dark(var(--ursus-ivory), var(--ursus-navy));
    --logo-silhouette: light-dark(var(--ursus-navy), var(--ursus-ivory));
  }

  :where([data-surface="navy"]) {
    color-scheme: dark;
    --surface-bg:         var(--ursus-navy);
    --surface-fg:         var(--ursus-ivory);
    --surface-fg-muted:   var(--ursus-ivory-muted-on-navy);
    --surface-rule:       var(--ursus-ivory-rule-on-navy);
    --surface-accent-rule: var(--ursus-gold);
    --surface-accent-text: var(--ursus-gold);     /* 5,06:1 · cifras y titulares cortos */
    --surface-focus:      var(--ursus-gold);
    --btn-bg:  var(--ursus-ivory);
    --btn-fg:  var(--ursus-navy);
    --logo-silhouette: var(--ursus-ivory);
  }

  :where([data-surface="night"]) {
    color-scheme: dark;
    --surface-bg:         var(--ursus-night);
    --surface-fg:         var(--ursus-ivory);
    --surface-fg-muted:   var(--ursus-ivory-muted-on-night);
    --surface-rule:       color-mix(in srgb, var(--ursus-ivory) 14%, var(--ursus-night));
    --surface-accent-rule: var(--ursus-gold);
    --surface-accent-text: var(--ursus-gold);     /* 6,52:1 */
    --surface-focus:      var(--ursus-gold);
    --btn-bg:  var(--ursus-ivory);
    --btn-fg:  var(--ursus-night);
    --logo-silhouette: var(--ursus-ivory);
  }

  :where([data-surface]) {
    --logo-facet: var(--ursus-slate);
    --logo-shard: var(--ursus-gold);
  }

  /* Modo de alto contraste de Windows: colores del sistema */
  @media (forced-colors: active) {
    :where([data-surface]) {
      --surface-rule: CanvasText;
      --surface-accent-rule: CanvasText;
      --surface-focus: Highlight;
    }
  }
}