/* ============================================================
   UNO20 · tokens.css
   Sistema de tokens — Dirección de diseño «LA CONSTANTE»
   Fuente vinculante: 03_diseno/direccion-diseno.md §3
   Regla: ningún hex suelto en componentes; solo tokens.
   Verde militar NUNCA como color de texto sobre fondo oscuro.
   ============================================================ */

:root {
  /* ── COLOR · fondos y superficies ───────────────────────── */
  --bg-0:        #0B0B0A;  /* fondo profundo: footer, age-gate, modales */
  --bg-1:        #0F0F0F;  /* fondo base de página (negro de marca) */
  --surface-1:   #161713;  /* cards, acordeones (negro verdoso +1) */
  --surface-2:   #1D1F19;  /* superficie elevada: dropdowns, hover de card */
  --surface-verde: #2E3529; /* bloques destacados (banda 3 reglas, método) */
  --line-1:      #262822;  /* bordes sutiles, divisores */
  --line-2:      #3A3E33;  /* bordes activos / hover */

  /* ── COLOR · marca ──────────────────────────────────────── */
  --verde-militar: #4A5643; /* color primario de marca (botones, sello) */
  --verde-hover:   #57654F; /* hover de primario */
  --verde-deep:    #39422F; /* pressed / fondos de énfasis */
  --salvia:        #A7AA98; /* secundario: texto secundario, iconos, bordes */
  --salvia-claro:  #C6C9B9; /* hover de enlaces, labels activos */
  --crema:         #F2EDE2; /* texto principal, el número 1,20, logo-borde */
  --crema-dim:     #E5DFD0; /* texto sobre verde militar */

  /* ── COLOR · semánticos ─────────────────────────────────── */
  --text-1:      var(--crema);        /* titulares y cuerpo principal */
  --text-2:      var(--salvia);       /* secundario, captions, meta */
  --text-3:      #7E8175;             /* terciario SOLO ≥18px o decorativo */
  --accent:      var(--verde-militar);
  --accent-ink:  var(--crema-dim);    /* texto sobre accent */
  --link:        var(--salvia-claro); /* enlaces: subrayado siempre */
  --focus-ring:  #C6C9B9;             /* outline 2px offset 3px */
  --ok:          #7FA36B;  /* éxito (añadido al pedido) */
  --warn:        #C9A86A;  /* avisos (1 variedad por pedido) — ámbar apagado */
  --error:       #C97B6A;  /* errores de formulario — teja, NUNCA rojo promo */
  --overlay:     rgba(11, 11, 10, 0.72); /* scrim de modales/age-gate */

  /* ── TIPOGRAFÍA · familias ──────────────────────────────── */
  --font-display: "Archivo", "Arial Black", sans-serif;   /* wdth 125 = Expanded */
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace; /* datos, labels, precio-ticker */

  /* ── TIPOGRAFÍA · escala fluida (base 16px) ─────────────── */
  --fs-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);    /* hero H1 home */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3vw, 3.75rem);   /* H1 interiores */
  --fs-h2:      clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* intro/lead */
  --fs-body:    1rem;                                     /* 16px mínimo SIEMPRE */
  --fs-small:   0.875rem;                                 /* meta, créditos */
  --fs-label:   0.75rem;   /* eyebrows mono MAYÚSCULAS tracking 0.14em */
  --fs-precio:  clamp(2rem, 1.4rem + 2.4vw, 3.5rem);     /* el número 1,20 */

  --lh-tight: 1.05;  /* display expanded */
  --lh-head:  1.15;
  --lh-body:  1.6;
  --ls-expanded: 0.01em;  /* titulares (Archivo Expanded ya es ancho) */
  --ls-label:    0.14em;  /* eyebrows/labels mono uppercase */

  /* ── ESPACIADO (escala 4px) ─────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-6: 1.5rem;   --sp-8: 2rem;    --sp-12: 3rem;    --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-section: clamp(4rem, 3rem + 5vw, 8rem);   /* padding vertical de sección */
  --sp-gutter:  clamp(1.25rem, 4vw, 3rem);       /* márgenes laterales */
  --container:  75rem;   /* 1200px máx contenido */
  --container-narrow: 46rem; /* 736px prosa (método, legales) */

  /* ── RADIOS (líneas redondeadas del logo) ───────────────── */
  --r-sm:   8px;    /* inputs, chips */
  --r-md:   14px;   /* botones */
  --r-lg:   22px;   /* cards, imágenes */
  --r-xl:   32px;   /* bloques hero, banda reglas */
  --r-pill: 999px;  /* selector de gramos, ticker, badges informativos */

  /* ── SOMBRAS (en dark: borde + brillo, no sombra dura) ──── */
  --shadow-card:  0 0 0 1px var(--line-1), 0 12px 32px rgba(0,0,0,0.35);
  --shadow-hover: 0 0 0 1px var(--line-2), 0 20px 48px rgba(0,0,0,0.45);
  --shadow-modal: 0 0 0 1px var(--line-2), 0 32px 80px rgba(0,0,0,0.6);
  --glow-crema:   0 0 48px rgba(242,237,226,0.07); /* halo del número 1,20 */

  /* ── MOTION (calmado y deliberado) ──────────────────────── */
  --ease-calm:  cubic-bezier(0.25, 0.1, 0.25, 1);  /* estándar */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);      /* entradas */
  --dur-micro:  200ms;   /* hover, focus, press */
  --dur-base:   450ms;   /* reveals, acordeones */
  --dur-slow:   700ms;   /* hero, transiciones de bloque */
  --dur-sello:  60s;     /* rotación del sello (linear, infinite) */

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --z-header: 100; --z-dropdown: 200; --z-cookies: 800;
  --z-modal: 900;  --z-agegate: 1000;
}