/* Isallabs — design tokens (v0.2, 2026-09-08)
   EN USO por el sitio: site/index.html enlaza css/tokens.css antes de styles.css.
   site/css/tokens.css es una copia de este archivo — al editar uno, copiar al otro.

   **v0.2: la paleta del sistema ES la paleta de las figuras.** Se midió sobre los objetos
   de `site/assets/material/` (445.000 píxeles opacos, k-means) en vez de deducirla del
   prompt, y salieron tres familias:

     · verde bosque, 40 % de cada figura — ya era `--accent-*`, no cambia
     · un neutro CÁLIDO de pergamino, 48 % — el sistema no lo tenía: su rampa era fría (h160)
     · kraft, 12 % (#be905b y #7f5b31 medidos) — no existía en el sistema

   Así que los neutros pasan de h160 (frío) a h46 (pergamino) y entra la rampa `--kraft-*`.
   Antes las figuras se apoyaban sobre un papel de otra temperatura que ellas.

   **Cómo se convirtió la rampa, y por qué es seguro:** cada escalón conserva su LUMINANCIA
   RELATIVA exacta (la Y de sRGB, no el `V` de HSV, que no es luminancia). Con la luminancia
   clavada, todos los pares texto/fondo mantienen su ratio de contraste al segundo decimal:
   el cambio es solo de temperatura. Verificado escalón a escalón. */

:root {
  /* ---------- color · neutros (h160) ---------- */
  --neutral-50:  #faf7ec;
  --neutral-100: #f2efe3;
  --neutral-200: #e2decf;
  --neutral-300: #c8c4b4;
  --neutral-400: #aca899;
  --neutral-500: #8d897d;
  --neutral-600: #726f65;
  --neutral-700: #5a5850;
  --neutral-800: #44433d;
  --neutral-900: #2f2e2a;
  --neutral-950: #1c1b19;

  /* ---------- color · acento (h158) ---------- */
  --accent-50:  #f0f9f4;
  --accent-100: #e3f3e9;
  --accent-200: #c6e8d3;
  --accent-300: #9bd3b2;
  --accent-400: #64bd8c;
  --accent-500: #16a267;
  --accent-600: #118353;
  --accent-700: #126842;
  --accent-800: #035030;
  --accent-900: #003820;
  --accent-950: #012111;

  /* ---------- color · kraft (h32) ----------
     El cálido estructural del material: la base sobre la que se apoya cada figura y
     sus caras interiores. Medido en las piezas (#be905b y #7f5b31). NO es un color de
     aviso: para eso está `--warning`, que se separó de esta familia. */
  --kraft-50:  #fcf2e6;
  --kraft-100: #f5e3ce;
  --kraft-200: #ebceae;
  --kraft-300: #dbb68c;
  --kraft-400: #cca06e;
  --kraft-500: #bf915c;
  --kraft-600: #a17747;
  --kraft-700: #805b32;
  --kraft-800: #614525;
  --kraft-900: #42301b;

  /* ---------- color · secundario (h215) ----------
     SIN USO en el sitio (2026-09-08). Se conserva del sistema v0.1; si algún día se
     usa, hay que revisar que un azul frío no choque con el papel cálido. */
  --secondary-50:  #f1f8fa;
  --secondary-100: #e3f2f5;
  --secondary-200: #c6e4ec;
  --secondary-300: #9cceda;
  --secondary-400: #66b5c8;
  --secondary-500: #1f99b0;
  --secondary-600: #197b8f;
  --secondary-700: #166272;
  --secondary-800: #074b58;
  --secondary-900: #01343e;
  --secondary-950: #001f26;

  /* ---------- color · semánticos ---------- */
  --success-soft: #e4f6e7; --success: #1b9247; --success-strong: #0c5d2a;
  --warning-soft: #f7ead1; --warning: #8a5a06; --warning-strong: #5c3b02;
  --danger-soft:  #feebe9; --danger:  #d73337; --danger-strong:  #910e19;
  --info-soft:    #e3f3ff; --info:    #0782bf; --info-strong:    #01537b;

  /* ---------- color · uso ---------- */
  --background:    var(--neutral-50);
  --surface:       #fdfbf4;
  --surface-2:     var(--neutral-100);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --text:          var(--neutral-950);
  --text-muted:    var(--neutral-600);
  --text-faint:    var(--neutral-400);
  --accent:        #0f7a4f;
  --accent-hover:  var(--accent-700);
  --accent-soft:   var(--accent-100);
  --on-accent:     #ffffff;   /* blanco si contrasta ≥ 4.5:1 con --accent, si no --text */

  /* ---------- el material, en semántica ----------
     Verde = Isallabs. Kraft = la estructura sobre la que se apoya. Ámbar = el hoy, el
     dolor —se empujó a #8a5a06, más oscuro y saturado, para que no se confunda con el
     kraft, que ahora ocupa su vecindario—. */
  --material:      var(--kraft-500);   /* la base de la figura */
  --material-deep: var(--kraft-700);   /* su cara en sombra */
  --material-face: var(--kraft-100);   /* las caras interiores de la cartulina */

  /* ---------- tipografía ---------- */
  --font-sans: 'Funnel Sans', 'Segoe UI', Arial, sans-serif;
  /* NO SE USA EN LA HOME (2026-09-02): el sitio va 100 % en Funnel Sans, y la fuente
     Geist Mono ya no se carga. Se conserva solo por si un asset interno la necesita. */
  --font-mono: 'Geist Mono', Consolas, 'Courier New', monospace;
  --weight-light: 360;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-display-1: 600 min(76px, 6.5vw) / 1.06 var(--font-sans);  /* tracking -0.04em */
  --text-display-2: 600 76px / 80px var(--font-sans);               /* tracking -3.04px · mobile 32/40 -1.28px */
  --text-price:     600 72px / 1 var(--font-sans);                  /* tracking -3px · mobile 56 */
  --text-title:     600 24px / normal var(--font-sans);             /* tracking -0.96px · mobile 16 -0.64px */
  --text-lead:      360 16px / 24px var(--font-sans);               /* tracking -0.16px · mobile 14/20 */
  --text-body:      360 15px / 22px var(--font-sans);               /* tracking -0.14px · mobile 14/20 */
  --text-ui:        360 15px / 1.5 var(--font-sans);                /* tracking -0.15px */
  --text-small:     360 13.5px / 20px var(--font-sans);             /* tracking -0.13px */
  --text-caption:   italic 360 13px / 1.7 var(--font-sans);
  --text-mono-badge: 700 9px / 20px var(--font-mono);               /* obsoleto: el badge usa Funnel Sans */
  --text-mono-tag:   500 10px / 1 var(--font-mono);                 /* obsoleto: no usar en la web */

  /* ---------- capa Explica (tipo Vox, 2026-09-02) ---------- */
  --marker:        var(--accent-200);   /* resaltador: lo que resolvemos */
  --marker-warn:   color-mix(in srgb, var(--warning) 24%, var(--surface)); /* resaltador: el dolor (warning-soft no se ve sobre el fondo) */
  --line-dots:     var(--neutral-400);  /* rutas punteadas en reposo */
  --line-dots-on:  var(--accent);       /* rutas punteadas activas */
  --weight-display: 700;

  /* ---------- Montaje (collage editorial, 2026-09-02) — ver context/09-visual.md ---------- */
  /* Sistema vigente: la ronda Estudio (v4) se revirtió el 2026-09-03 y sus tokens
     (--stage-*, --floor-shadow, --blur-fly) se eliminaron con ella. */
  --grain:       0.10;                 /* opacidad del grano de papel (ruido SVG) sobre toda la página.
                                          La fibra fotografiada de la v6 se revirtió el 2026-09-04:
                                          «el fondo estaba mejor blanco». */
  --shape:       var(--accent);        /* la forma plana: Isallabs, la solución */
  --shape-warn:  var(--warning);       /* la forma plana: el hoy, el dolor */
  --cut-offset:  6px;                  /* silueta desplazada de un recorte */
  --ink-line:    var(--neutral-800);   /* líneas de anotación de 1 px */

  /* ---------- Nexo (hero, 2026-09-04) ---------- */
  /* El abanico de rutas del hero converge en la ficha del isotipo. Las rutas son tinta
     neutra; el único verde que viaja por ellas son los pulsos —cada función conectándose
     al centro—, y la única forma plana de la composición es la ficha central. */
  --nexus-line:        var(--ink-line);   /* las rutas: tinta neutra de 1 px */
  --nexus-line-alpha:  0.30;              /* rutas de relleno (0.22 → 0.30 el 2026-09-04: sobre el papel se leían como filigrana) */
  --nexus-route-alpha: 0.55;              /* las seis rutas con ficha (0.42 → 0.55 el 2026-09-04) */
  --nexus-flow:        var(--accent);     /* lo único verde que viaja: el flujo hacia Isallabs */
  --nexus-flow-alpha:  0.85;              /* cuánto marca el trazo del flujo */
  --dur-flow:          2.6s;              /* lo que tarda un trazo en llegar al isotipo */
  --tile-lg:   88px;   /* ficha grande (las dos cercanas al centro), desde 768 */
  --tile:      72px;   /* ficha del nexo, desde 768 */
  --core:      96px;   /* la ficha del isotipo, desde 768 */
  --tile-lg-m: 52px;   /* mobile */
  --tile-m:    46px;
  --core-m:    64px;

  /* ---------- espaciado ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;  --space-9: 48px;  --space-10: 56px;
  --space-11: 72px; --space-12: 100px; --space-13: 152px; --space-14: 200px; --space-15: 240px;

  /* ---------- layout ---------- */
  --bp-md: 768px;
  --container-head: 1200px;
  --container-grid-3: 1100px;
  --container-header: 1000px;
  --container-grid: 960px;
  --page-padding: 16px;          /* desktop 24px */
  --section-gap: 140px;          /* desktop 200px */
  --head-gap: 24px;              /* desktop 72px */
  --block-top: 40px;             /* desktop 72px */

  /* ---------- forma ---------- */
  --radius-badge: 3px;
  --radius-mini-badge: 4px;
  --radius-button: 10px;
  --radius-button-lg: 12px;
  --radius-footer-pill: 14px;
  --radius-pill: 16px;
  --radius-card-m: 20px;
  --radius-card: 24px;
  --radius-slide: 28px;
  --radius-phone: 50px;
  --radius-full: 999px;

  --border-hairline: 0.5px solid rgba(0, 0, 0, 0.10);
  --border-card: 0.5px solid var(--surface);
  --border-input: 1px solid var(--border-strong);
  --border-glass: 0.5px solid rgba(255, 255, 255, 0.8);

  /* ---------- elevación ---------- */
  --shadow-card:   0 10px 40px -10px rgba(10, 10, 10, 0.15);
  --shadow-deep:   0 10px 40px -10px rgba(10, 10, 10, 0.30);
  --shadow-header: 0 10px 40px -10px rgba(10, 10, 10, 0.20);
  --shadow-chip:   0 4px 16px -6px rgba(10, 10, 10, 0.15);
  --shadow-slide:  0 14px 50px -12px rgba(10, 10, 10, 0.25);
  --shadow-fab:    0 10px 30px -6px rgba(10, 10, 10, 0.40);
  --shadow-fan:    drop-shadow(0 22px 28px rgba(10, 10, 10, 0.25));
  --shadow-header-m: 0 10px 40px 0 rgba(10, 10, 10, 0.20);
  --shadow-slide-m: 0 7px 30px -7px rgba(10, 10, 10, 0.30);
  --shadow-faq:    0 4px 20px -8px rgba(10, 10, 10, 0.10);
  --shadow-fan-hover: drop-shadow(0 30px 34px rgba(10, 10, 10, 0.35));
  --glow:          inset 0 0 12px 0 rgba(255, 255, 255, 0.5);
  --glass-bg:      rgba(229, 231, 236, 0.4);
  --glass-blur:    15px;         /* mobile 30px */

  /* ---------- movimiento ---------- */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fan:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --dur-hover: 150ms;
  --dur-pill: 200ms;
  --dur-fade: 300ms;
  --dur-drawer: 350ms;
  --dur-enter: 450ms;
  --dur-carousel: 500ms;
  --dur-rotator: 520ms;
  --dur-fan: 700ms;
}