/* ══════════════════════════════════════════════════════════════
   TOKENS — Manual de Identidad de Marca EII TWINS · v1.0 (2026)

   Nothing in this file is a design choice of ours. Every value is
   transcribed from the manual, with the chapter noted. If a value
   here disagrees with the manual, the manual wins.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── §06 · Paleta primaria ────────────────────────────────── */
  --negro:    #000000;   /* Negro Obra   · Pantone Black C      */
  --ambar:    #FCB118;   /* Ámbar Señal  · Pantone 1235 C aprox */
  --blanco:   #FFFFFF;   /* Blanco Plano · papel y espacio libre*/

  /* ── §06 · Paleta de apoyo ────────────────────────────────── */
  --grafito:  #121212;   /* texto extenso y superficies oscuras */
  --acero:    #6B6B6B;   /* texto secundario y pies de foto     */
  --concreto: #D8D7D2;   /* líneas, bordes y separadores        */
  --humo:     #F4F4F2;   /* fondos claros y tablas              */

  /* Estados solamente. §06: «Verde y rojo NO son colores de
     marca: se limitan a tablas y estados de proyecto.»          */
  --verde:    #1F7A3D;   /* aprobado, entregado, disponible     */
  --rojo:     #C0392B;   /* error, retraso, no disponible       */

  /* ── Semantic roles ───────────────────────────────────────────
     The site is built light-first to hold §06's 60 · 30 · 10
     proportion. Dark bands are deliberate exceptions, and opt in
     via .band--negro rather than being the default ground.      */
  --ground:      var(--blanco);
  --ground-alt:  var(--humo);
  --ink:         var(--negro);
  --ink-soft:    var(--grafito);
  --ink-2:       var(--acero);
  --line:        var(--concreto);
  --line-soft:   #E8E7E4;

  /* Roles inside a Negro Obra band (§05 version B territory) */
  --neg-ground:  var(--negro);
  --neg-surface: var(--grafito);
  --neg-ink:     var(--blanco);
  --neg-ink-2:   #9E9E9A;      /* Acero lifted to clear 4.5:1 on black */
  --neg-line:    #2A2A2A;

  /* ── §07 · Tipografía ─────────────────────────────────────────
     Three families, three jobs. Substitutes are the manual's own
     authorised list, not arbitrary fallbacks.                   */
  --display: 'Anton', 'Arial Narrow', Arial, sans-serif;      /* titulares  */
  --texto:   'Archivo', Helvetica, Arial, sans-serif;         /* cuerpo/UI  */
  --mono:    'IBM Plex Mono', Consolas, 'Courier New', monospace; /* datos  */

  /* §07 scale, converted from the manual's point sizes.
     Anton is display-only and always uppercase.                 */
  --t-display: clamp(2.75rem, 7.5vw, 5.5rem);   /* 40–70 pt      */
  --t-h1:      clamp(2.25rem, 5.5vw, 3.75rem);
  --t-h2:      clamp(1.5rem, 3.2vw, 2.125rem);  /* 22–30 pt      */
  --t-h3:      1.0625rem;                       /* 10,5–12 pt·700*/
  --t-body:    1rem;                            /* 9,5–10 pt     */
  --t-menor:   0.875rem;                        /* 8–8,6 pt      */
  --t-mono:    0.75rem;                         /* 6,5–8 pt      */
  --t-mono-sm: 0.6875rem;

  --lh-display: 0.92;    /* §07: interlineado 0,90–0,95          */
  --lh-body:    1.55;    /* §07: cuerpo interlineado 1,5         */
  --track-mono: 0.14em;  /* §07: mono «con interletrado abierto» */

  /* §07: «Máximo de 75 caracteres por línea en texto corrido.» */
  --measure: 68ch;

  /* ── §08 · Retícula y espacio ─────────────────────────────────
     «Espaciado en múltiplos de 8 px en entornos digitales.»     */
  --s1:  8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5:  40px;  --s6: 48px;  --s7: 64px;  --s8: 80px;
  --s9:  96px;  --s10: 128px;

  --shell: 1200px;                       /* 12-column content field */

  /* §08 exige múltiplos de 8 px. Un clamp() fluido aterriza en valores
     arbitrarios (medido: 125,71 px), así que el ritmo va escalonado por
     breakpoint y cada paso es múltiplo de 8. */
  --gutter: 16px;
  --band-y: 64px;
  --gap-duo: 32px;     /* hueco entre columnas del bloque duo */
  --portada-y: 64px;  /* respiración de la portada */

  --nav-h:  96px;     /* tall enough for the 140px-wide logo minimum */
  --nav-h-sm: 72px;

  /* ── Detail ───────────────────────────────────────────────── */
  --r-ficha: 14px;    /* §08.02 · la ficha, esquinas redondeadas */
  --r-sm: 4px;
  --barra: 4px;       /* §11 · «barra ámbar de 4 pt»             */

  --ease: cubic-bezier(.2, .6, .35, 1);
  --dur: 200ms;
  --dur-slow: 480ms;

  --z-nav: 900;
  --z-menu: 950;
}

/* Escalones del ritmo — todos múltiplos de 8 px (§08). */
@media (min-width: 640px)  { :root { --gutter: 32px; --band-y: 88px;  --gap-duo: 48px; --portada-y: 96px;  } }
@media (min-width: 1024px) { :root { --gutter: 40px; --band-y: 112px; --gap-duo: 72px; --portada-y: 128px; } }
@media (min-width: 1360px) { :root { --gutter: 48px; --band-y: 128px; --gap-duo: 96px; --portada-y: 152px; } }

/* ── Sin modo oscuro automático · decisión deliberada ─────────
   §06 fija la proporción en 60 blanco / 30 negro / 10 ámbar. Invertir
   el sitio entero según la preferencia del sistema operativo lo
   llevaría a ~90 % negro, que es exactamente la desviación que este
   manual corrige.
   El negativo del manual (logotipo versión B) está previsto para
   piezas concretas — «fondos negros, video y vallas de obra» — no
   para una inversión general. En la web esas piezas son las bandas
   .band--negro, la portada y el pie, que ya son negras para todos.
   Por eso el sitio se sirve claro en cualquier preferencia. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}