/* ============================================================================
   Tokens del sistema · única fuente de verdad
   ============================================================================
   Vive aparte de style.css porque las páginas convertidas en la Fase 2
   (transparencia, what-is, how-it-works, modelo, el wizard, unsubscribe)
   tienen su CSS inline y NO cargan style.css: meterles los 35 KB de estilos
   de layout para heredar diez colores arriesgaba romperles la maqueta, y
   copiarles el bloque de tokens habría dejado doce copias que se
   desincronizan a la primera.

   Cargar este archivo es barato y no impone ni una regla de layout.
   ============================================================================ */

:root {
    /* Sistema claro · rediseño 2026-09-10 (canvas de Claude Design, revisado
       por Andrés). Un solo papel para todo el dominio, dos superficies, dos
       acentos. La congruencia sale de que ninguna pantalla invente un color.

       REGLA DE CONTRASTE (docs/frontend_i18n_style.md): todo texto se mide
       contra --bg-2 #F1EADC, que es el fondo más oscuro del sistema (inputs,
       slots, filas alternas) — no contra el papel #F7F3EA ni contra la
       tarjeta #FFFCF6, que son más claros y dan números optimistas. El
       error se cometió dos veces seguidas: primero midiendo contra la
       tarjeta, después contra el papel. Por eso el doc fija el HEX y no
       una descripción — una frase se reinterpreta, un valor no.
       Bajo 12px el mínimo sube a 7:1, pero la salida preferida es subir la
       letra a 12px: mono en mayúsculas con letter-spacing a 10px es duro
       de leer aunque el contraste pase. */
    --bg: #F7F3EA;                        /* papel · fondo de todo el dominio */
    --bg-2: #F1EADC;                      /* hundido · inputs, slots, filas */
    --paper: #F7F3EA;                     /* alias para compat */
    --paper-card: #FFFCF6;                /* superficie · tarjetas y láminas */
    --paper-shadow: rgba(17, 27, 36, 0.04);
    --panel: #FFFCF6;
    --panel-2: #F1EADC;
    --hair: #E2DACA;                      /* el único borde del sistema */
    --hair-2: #C9BFA9;                    /* filete acentuado */

    --fg: #111B24;                        /* tinta · 15.7:1 sobre papel */
    --ink: #111B24;                       /* alias para compat */
    /* Los dos grises son valores SÓLIDOS y verificados, no alfa sobre papel:
       un rgba() cambia de contraste según lo que tenga debajo, así que deja
       de ser una garantía en cuanto el elemento se mueve a una tarjeta.
       Ojo con los nombres: `faint` es MÁS oscuro que `dim`, al revés de lo
       que sugiere. No es un error — `faint` viste etiquetas mono de 9-11px,
       que por ser diminutas exigen 7:1, y `dim` viste texto de 13-15px, que
       se conforma con 5.5:1. Se conservan los nombres para no reescribir 194
       usos; el alias `--fg-label` es el nombre honesto para lo nuevo. */
    --fg-dim: #545E68;                    /* secundario 13-15px · 5.52:1 sobre --bg-2 */
    --ink-soft: #545E68;                  /* alias */
    --fg-faint: #464E58;                  /* etiquetas mono <12px · 7.04:1 sobre --bg-2 */
    --ink-muted: #464E58;
    --fg-label: #464E58;                  /* nombre honesto de --fg-faint */

    --blue: #1D5FD8;        /* evidencia · 5.2:1 */
    --blue-bright: #3B82F6;
    --cyan: #0B6B63;        /* teal profundo · links, CTA, activo · 5.8:1 */
    --cyan-hover: #08544E;  /* hover / presionado */
    --cyan-bright: #34E0D0; /* SOLO sobre lámina oscura */
    --gold: #8A5A16;        /* ámbar · en vivo, generando, aviso · 5.3:1 */
    --gold-bright: #F2B340; /* SOLO sobre lámina oscura */
    --up: #0B6B63;
    --down: #8E2E1B;        /* error, tesis a la baja · 6.6:1 */

    /* --------------------------------------------------------------------
       HUES DE TESIS · rellenan, nunca escriben (regla de Andrés, 2026-09-10)
       --------------------------------------------------------------------
       Su trabajo es rellenar barras, puntos y sparklines: identifican el eje
       de un vistazo sin obligar al lector a descifrar letra de color. Los
       originales nacieron para brillar sobre #060B14 y sobre papel se
       desvanecen — #CFD03E, el amarillo de economía, daba 1.3:1 y era un
       filete invisible. Se conservó tono y saturación y solo se bajó la
       luminancia hasta ≥4.5:1 contra el papel y ≥4.1:1 contra --bg-2, que es
       el margen que un filete de 3px necesita para existir.

       Los números decorativos ("01", "02") que antes iban del color del eje
       ahora van en --deco-num con aria-hidden: la barra identifica, el
       número solo numera.
       -------------------------------------------------------------------- */
    --tm-ia:  #137C73;      /* IA y cómputo · era #34E0D0 */
    --tm-geo: #D62513;      /* Geopolítica y conflicto · era #EF5B4C */
    --tm-eco: #72731C;      /* Economía y finanzas · era #CFD03E */
    --tm-bio: #4C7A1F;      /* Biotecnología · era #8FD24E */
    --tm-soc: #D41E5A;      /* Demografía y sociedad · era #E85C8A */
    --tm-reg: #4D5DF3;      /* Regulación y estado de derecho · era #6E7BF5 */
    --tm-epi: #C228A3;      /* Esfera pública y epistemología · era #E069C8 */
    --tm-pla: #277E43;      /* Sistemas biofísicos planetarios · era #46C56E */

    /* Decorativos · NO son texto. Los números "01" van con aria-hidden y el
       subrayado de enlaces a 1.5px, para que el enlace se lea como enlace sin
       depender del color. */
    --deco-num: #C9BFA9;
    --deco-underline: #A8CFCB;

    /* Láminas oscuras: las gráficas conservan su dark porque están dibujadas
       para él. No tocar sin recolorear el canvas. */
    --viz-bg: #1B2733;
    --viz-bg-2: #0A1322;
    --viz-fg: #EAF1FB;
    --viz-hair: rgba(120, 170, 240, 0.14);

    /* ------------------------------------------------------------------
       WORDMARK · variante papel aprobada por Andrés el 2026-09-10
       ------------------------------------------------------------------
       El gradiente original nació para brillar contra #060B14 y sobre papel
       daba 1.4:1 — se leía apagado, casi lavado. La variante conserva
       geometría, tipo y familia de color, y solo corre los stops al extremo
       oscuro del mismo ámbar (≈5.9:1). Es la misma marca en otro registro,
       no otra marca.

       El REGISTRO OSCURO sigue vivo y no es una excepción: /expo y las
       láminas de gráficas usan --wordmark-oscuro, que es el original sin
       tocar. Ver docs/frontend_i18n_style.md, "Los dos registros".

       Volver atrás es esta línea:
           --wordmark: var(--wordmark-oscuro);
       ------------------------------------------------------------------ */
    --wordmark-oscuro: linear-gradient(135deg,#FFECC0 0%,#E8A85E 55%,#C67A2E 100%);
    --wordmark-paper:  linear-gradient(135deg,#C67A2E 0%,#A05F18 55%,#6E3D0B 100%);
    --wordmark: var(--wordmark-paper);

    /* Aliases viejos remapeados al nuevo lenguaje */
    --terracotta: var(--cyan);
    --terracotta-dark: var(--blue);
    --teal: var(--cyan);
    --teal-soft: var(--blue);

    --max-width: 1480px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);

    --serif: "Bricolage Grotesque", system-ui, sans-serif;
    --sans: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================================
   Los dos registros · qué wordmark sirve cada superficie
   ============================================================================
   El registro no es una propiedad de la página sino de la superficie sobre la
   que está el elemento, y las dos cosas no coinciden: la home es una página de
   papel con una lámina oscura dentro, y su wordmark vive en la lámina. Atarlo
   a `html[data-surface="paper"]` le habría puesto ámbar oscuro sobre noche.

   Como --wordmark es una custom property, hereda: basta con que la lámina
   oscura la redeclare y todo lo que cuelgue de ella cambia de registro sin
   que ningún hijo tenga que saberlo.

   Papel es el default. Oscuro se pide: [data-hero] (las láminas de gráficas)
   y [data-surface="dark"] (/expo y las piezas de presentación).
   ============================================================================ */
[data-hero],
[data-surface="dark"] {
    --wordmark: var(--wordmark-oscuro);
}