/* ==========================================================================
   tokens.css — Tokens de marca (Manual de Marca Jairo Varela)
   Jerarquía cromática: rojo protagonista → naranjas/marrones (brass) → negro/gris/blanco.
   Los componentes NUNCA usan hex crudos: siempre estos tokens.
   ========================================================================== */

:root {
  /* ── Paleta de marca ─────────────────────────────────────────────────── */
  --negro:   #141312;  /* fondo principal / estructura */
  --rojo:    #C0102B;  /* protagonista: pasión, energía */
  --gris:    #C9C9C9;  /* neutral: texto secundario, líneas */
  --brass:   #F29139;  /* homenaje al brass: acentos cálidos */
  --quemado: #BF5B21;  /* complemento brass */
  --marron:  #352D1D;  /* complemento brass / profundidad */
  --blanco:  #FFFFFF;  /* texto sobre negro, respiro */

  /* ── Derivados de estructura (no son colores nuevos: matices de la paleta) ── */
  --negro-2:      #1B1918;   /* superficie +1 sobre el negro base */
  --papel:        #F2F2F2;   /* tema claro: 75 % blanco + 25 % gris de marca */
  --gris-oscuro:  #5C5C5B;   /* texto secundario sobre claro: 60 % negro + 40 % gris (6:1 sobre --papel) */
  --calido-claro: #99491A;   /* brass sobre claro: naranja quemado al 80 % (5,6:1 sobre --papel) */

  /* ── Tema dinámico ─────────────────────────────────────────────────────────
     Por defecto oscuro. En el Home, main.js interpola estas 4 variables con el scroll
     (oscuro → claro). Todo lo demás (líneas, bordes, textos) se deriva de ellas.       */
  --bg:     var(--negro);    /* fondo de página */
  --fg:     var(--blanco);   /* texto principal */
  --fg-2:   var(--gris);     /* texto secundario */
  --calido: var(--brass);    /* acento cálido pequeño (eyebrows, años) */

  --linea:        color-mix(in srgb, var(--fg) 20%, transparent);
  --linea-fuerte: color-mix(in srgb, var(--fg) 50%, transparent);
  --foco: var(--calido);     /* anillo de foco */

  /* ── Degradados de marca (rojo dominante) ────────────────────────────── */
  /* (más abajo: :root[data-theme="light"] = tema claro fijo para páginas enteras) */
  --grad-marca:  linear-gradient(135deg, var(--rojo) 0%, var(--rojo) 40%, var(--quemado) 74%, var(--brass) 100%);
  --grad-filtro: linear-gradient(160deg, rgb(192 16 43 / .9) 0%, rgb(191 91 33 / .6) 58%, rgb(242 145 57 / .4) 100%);
  --grad-brass:  linear-gradient(90deg, var(--quemado), var(--brass));

  /* ── Tipografía (fuentes del manual, alojadas en /assets/fonts) ───────── */
  --font-display: "Hubiron", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-eyebrow: .75rem;                                    /* 12px · mayúsculas espaciadas */
  --fs-small:   .875rem;
  --fs-body:    clamp(1rem, .96rem + .2vw, 1.125rem);      /* 16 → 18px */
  --fs-lead:    clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fs-quote:   clamp(2rem, 1rem + 4.6vw, 6rem);
  --fs-title:   clamp(2.5rem, 1rem + 6vw, 7rem);

  --lh-display: .88;
  --ls-display: .02em;    /* Hubiron es condensada: con tracking 0 o negativo las letras se pegan */

  /* ── Espacio y layout ────────────────────────────────────────────────── */
  --gutter: clamp(16px, 3.2vw, 48px);
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));    /* márgenes con áreas seguras (notch) */
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --section-y: clamp(96px, 16vh, 200px);
  --header-h: clamp(76px, 6vw, 88px);   /* aloja la firma larga a su tamaño mínimo (113 px de ancho) */
  --radius: 0;            /* bordes duros: sin esquinas redondeadas */

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-inout:  cubic-bezier(.76, 0, .24, 1);
  --t-fast: 180ms;
  --t-med:  420ms;

  /* ── Capas ───────────────────────────────────────────────────────────── */
  --z-menu: 60;
  --z-header: 70;   /* por encima del menú: el botón "Cerrar" sigue accesible */
  --z-curtain: 100;
}

/* ── Tema CLARO fijo (páginas con 'theme' => 'light' en config.php, p. ej. /galeria) ──────────────────
   Mismos valores a los que llega el cambio dinámico oscuro→claro del Home (JV.theme en main.js); aquí
   aplican desde el primer pintado, sin parpadeo. Todo el CSS usa --bg / --fg / --fg-2 / --calido, así que
   el header, el menú, el footer y los botones se adaptan solos. */
:root[data-theme="light"] {
  --bg:     var(--papel);
  --fg:     var(--negro);
  --fg-2:   var(--gris-oscuro);
  --calido: var(--calido-claro);
  color-scheme: light;
}