/* ═══════════════════════════════════════════════════════════════
   TOKENS — el único archivo para recolorar o recomponer todo.
   Sistema al modo ilcapoproduction: negro puro y UN rojo que no es un
   acento suelto sino el color del texto. El rojo sale del propio
   trabajo (KROMA, ATOM BLISS, el loop de marca).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── COLOR ───────────────────────────────────────────────────── */
  --bg: #000000;
  --brand: #eadfdf;
  /* crema; era el rojo #d60001 de ilcapoproduction */
  --fg: var(--brand);
  /* titulares, nav, etiquetas y pie: todo en marca */
  --neutral: #e8e4dc;
  /* sólo para prosa larga: el rojo saturado cansa */

  --muted: color-mix(in srgb, var(--brand) 66%, #000);
  --hairline: color-mix(in srgb, var(--brand) 30%, #000);
  /* El original usa 20% porque sus portadas ya son oscuras. Acá las
     portadas van de un azul brillante a un naranja saturado, así que el
     velo sube: el titular no puede depender de qué foto le toque. */
  --scrim: rgb(0 0 0 / .42);
  --panel: #0a0a0a;

  /* ── SCOPE CLARO: interior de proyecto (patrón ref.digital/work/dime) ──
     El caso de estudio invierte: héroe negro, cuerpo sobre el beige exacto
     de REF, y el pie vuelve a negro para cerrar. El rojo de marca no
     desaparece — queda reservado para índices y hovers, que es el hilo que
     mantiene el caso dentro de este sitio y no dentro de REF. */
  --case-bg: #c4bab0;
  /* medido en vivo en ref.digital */
  --case-fg: #000000;
  --case-muted: color-mix(in srgb, #000 52%, #c4bab0);
  --case-hairline: color-mix(in srgb, #000 20%, #c4bab0);

  /* REF transiciona el color de fondo del documento en .2s y el del bloque
     de héroe en .4s. Los dos valores están medidos, no estimados. */
  --ease-case: cubic-bezier(.32, .94, .6, 1);
  --ease-tw: cubic-bezier(.4, 0, .2, 1);
  --dur-case: .2s;
  --dur-case-lg: .4s;

  /* ── TIPOGRAFÍA ──────────────────────────────────────────────
     UNA sola familia en todo el sitio — pedido explícito ("hay muchas
     [tipografías] y no se ve consistente"). Antes eran tres: Instrument
     Serif para titulares, Plus Jakarta Sans para UI/cuerpo, DM Mono
     para etiquetas — el pareo del original (Ivar Display + Helvetica)
     con alternativas libres. Los tres nombres de token SIGUEN
     existiendo (`--font-display`/`--font-ui`/`--font-mono`) para no
     tener que tocar cada uno de los ~30 sitios de `css/main.css` que
     ya escriben `font-family: var(--font-display)` etc. — pero ahora
     los tres apuntan al MISMO valor. Son alias, no fuentes distintas;
     si algún día hace falta volver a tener familias separadas, es
     cambiar acá y nada más.

     Sin la serif ni el mono, la jerarquía título/subtítulo/párrafo ya
     no la carga "qué tipografía es" — la carga el PESO (--weight-*
     más abajo) y el tamaño. Es el motivo por el que --font-display
     antes decía `font-weight: 400` ("la serif no necesita peso") y
     ahora los títulos van en 700: una sans-serif a tamaño de titular
     necesita peso propio para pesar tanto como pesaba la serif a
     tamaño regular. */
  --font-display: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Escala de PESO del sistema título/subtítulo/párrafo — la pieza
     nueva que hace el trabajo que antes hacía cambiar de tipografía.
     Cuatro escalones, no más: cada uno con un rol fijo (ver dónde se
     usa cada uno en main.css) en vez de pesos sueltos elegidos a ojo
     en cada componente. */
  --weight-title: 700;     /* .display, .h1 — el escalón más alto */
  --weight-subtitle: 600;  /* .h2, .micro — la mitad de la escalera */
  --weight-lead: 500;      /* .lead — más peso que el párrafo, menos que un título */
  --weight-body: 400;      /* párrafos y texto de UI de todos los días */

  /* El mínimo cuida que los titulares de una línea no envuelvan a 375px:
     si envuelven, el reveal por líneas recorta la segunda línea visual. */
  --text-display: clamp(2.75rem, 12vw, 9.5rem);
  --text-h1: clamp(1.75rem, 7vw, 6rem);
  --text-h2: clamp(1.5rem, 3.2vw, 2.75rem);
  --text-lead: clamp(1.15rem, 2vw, 1.75rem);
  --text-body: clamp(.95rem, 1.05vw, 1.0625rem);
  --text-micro: .6875rem;

  --lh-display: .85;
  /* .8 era la interlínea comprimida a propósito de LA SERIF (sus
     ascendentes/descendentes son más cortos) — a peso 700 en sans, .8
     apretaba demasiado y las líneas de un titular de 2 renglones se
     tocaban. .85 es el mínimo que separa sin aflojar el bloque. */
  --lh-body: 1.55;
  --ls-display: -.02em;
  /* Antes -.01em ("la serif ya viene apretada de fábrica"): una
     sans-serif en 700 no viene apretada de fábrica, así que el
     tracking negativo pasa a hacer ese trabajo — un poco más cerrado
     que antes para que un titular grande no se sienta suelto. */
  --ls-micro: .08em;
  /* Antes .14em: ese tracking ancho compensaba el ritmo monoespaciado
     de DM Mono (cada letra ya "pesa" el mismo ancho, así que separarlas
     más no rompía el bloque). En Jakarta Sans —proporcional— el mismo
     .14em se leía como letras sueltas, no como una etiqueta prolija;
     .08em sigue leyéndose como mayúscula-de-etiqueta sin ese efecto. */

  /* ── RETÍCULA Y ESPACIADO ──────────────────────────────────── */
  --cols: 12;
  --margin: clamp(1.15rem, 4vw, 3.5rem);
  --gutter: clamp(.75rem, 1.4vw, 1.5rem);

  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-section: clamp(5rem, 14vh, 12rem);

  /* ── CAPAS ─────────────────────────────────────────────────── */
  --z-hero: 0;
  --z-body: 40;
  --z-scrim: 50;
  --z-hero-ui: 60;
  --z-header: 150;
  --z-overlay: 300;
  --z-cursor: 500;
  --z-transition: 900;
  --z-loader: 9999;
  /* Chrome fijo que tiene que sobrevivir a la cortina de transición
     entre páginas sin parpadear — la tabbar de mobile la tapaba
     (mismo --z-header que el header, mucho más abajo que
     --z-transition) y desaparecía un instante en cada navegación. */
  --z-shell-fixed: 950;

  /* ── MOTION ────────────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(.16, 1, .30, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out-expo: cubic-bezier(.87, 0, .13, 1);

  --dur-fast: .3s;
  --dur-base: .6s;
  --dur-slow: 1s;
  --dur-curtain: .8s;
  /* Sólo para [data-reveal] (main.css) — separado de --dur-base porque
     ese token lo usan un montón de otras reglas del sitio y subirlo
     ahí habría cambiado la velocidad de todas ellas de paso. */
  --dur-reveal: .75s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .01ms;
    --dur-base: .01ms;
    --dur-slow: .01ms;
    --dur-curtain: .01ms;
    --dur-reveal: .01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}