/* ============================================================
CREATE / Claudia Restrepo — Sistema de tokens (OVERRIDE)
Dirección cromática: Colorista (el Temperador) · LÍNEA C de la Nómina Dalí
Encargo: 2026-09-04__CL-CLAUDIA-001__CABLEAR_SISTEMA_DE_COLOR_CANONICO
Revisión: 2026-09-04 — cablea el sistema APROBADO POR DAVID
QUÉ ES ESTE ARCHIVO
Override completo y uno-a-uno del ancla `tokens.css` del motor.
Conserva TODOS los nombres de variable del original: doce HTML
consumen estos tokens. Solo cambian los VALORES. Es la primera
hoja del de cada lámina; no hay tokens.css debajo.
Desde esta revisión define además el bloque `--cr-*`, que es el
único lugar desde el que se re-tintan los 19 SVG del set.
------------------------------------------------------------
EL SISTEMA APROBADO (locked — estos cinco son la vara)
Fondo dominante #F6F5F2 hueso neutro limpio, sin amarillo
Tinta principal #1E1B18 casi-negro cálido, autoridad legible
Color de marca #124E3A verde esmeralda profundo, estructura
Acento vivo #E2653B coral/terracota, la energía · jamás rojo
Oro fino (raro) #C6A15B filetes y remates, premium por escasez
Los cinco entran con su hex exacto, sin retoque. Todo lo demás
de este archivo es derivación medida de esos cinco: cada valor
se sitúa por contraste WCAG verificado, no por ojo.
QUÉ SUSTITUYE
La revisión del 2026-09-03 había derivado a cristal/añil
(--paper #EFF4F5 · --accent #2F259D, hex de The Legacy Group).
Ese añil es color de un tercero y la hacía leer como submarca de
su aliado. Sale entero. El crema/bronce anterior (#F5F0E8, el
fondo del anfitrión de Madrid) tampoco vuelve. El sistema de
arriba no procede ni de la casa que la invitó ni de la firma que
ella fundó: es suyo.
------------------------------------------------------------
LEY DE LEGIBILIDAD DE ESTE SISTEMA (medida, no estimada)
Sobre el hueso #F6F5F2:
· el CORAL mide 3,13:1 → NO puede ser texto. Solo gráfico,
fondo, filete, o titular ≥ 24px / ≥ 18,66px bold (AA-grande).
Cuando el coral tiene que escribir, escribe --accent-ink
(6,19:1) o --data (5,09:1).
· el ORO mide 2,23:1 → NUNCA texto, en ningún tamaño. Solo
filete y remate. Cuando el oro tiene que escribir sobre
hueso, escribe --accent-2 (5,73:1).
Sobre fondo CORAL: el único texto que pasa AA es la tinta
#1E1B18 (5,03:1). Blanco 3,41:1 y hueso 3,13:1 NO pasan.
Sobre fondo ESMERALDA: hueso 8,85:1 ✓ · oro 3,97:1 ✗ (para eso
está --cr-accent-2, el oro claro, 5,04:1 sobre esmeralda).
============================================================ */
:root{
/* ==========================================================
PAPEL — hueso neutro limpio
----------------------------------------------------------
#F6F5F2 es el fondo dominante aprobado: claro y sin el
amarillo del crema por defecto (HSL 45·18·96 — el matiz
existe pero a croma casi nulo: Lab a=-0,2 b=+1,5, es decir
blanco con temperatura, no un color). Sobre él la tinta
cálida da 15,72:1 y el esmeralda 8,85:1: el sistema entero
descansa en un papel que no compite con nada.
Los dos derivados conservan su matiz: elevar y reposar no
cambian de familia, solo de densidad.
========================================================== */
--paper: #F6F5F2; /* lienzo principal — hueso. Único fondo de lámina */
--paper-2: #FCFCFA; /* tarjetas y capas elevadas — eleva sin blanco puro */
--paper-3: #EAE8E2; /* zonas de reposo, bandejas, tablas */
/* ==========================================================
TINTA — casi-negro cálido
----------------------------------------------------------
#1E1B18 (HSL 30·11·11) es negro con temperatura, nunca negro
azulado: papel de matiz cálido con tinta cálida es la
combinación de la imprenta fina. Los dos derivados bajan
autoridad sin salirse del hue (34° y 32°).
========================================================== */
--ink: #1E1B18; /* texto principal · 15,72:1 sobre papel */
--ink-soft: #4A443C; /* leads y cuerpo secundario · 8,82:1 */
--ink-mute: #6E675F; /* labels, notas, pies, rótulo · 5,11:1.
CORREGIDO: el valor anterior daba 3,40:1 y
estaba marcado "no usar para texto". Éste sí
pasa AA: los pies y el rótulo son legibles. */
/* ==========================================================
ESTRUCTURA — EL ESMERALDA. El color de marca
----------------------------------------------------------
El token se sigue llamando --navy porque el motor lo consume;
su valor es el verde esmeralda profundo aprobado, #124E3A,
hex exacto. Aquí vive la autoridad del sistema: cenefas,
bloques sobrios, la banda de la infografía, el núcleo.
8,85:1 sobre papel; y con hueso escrito encima, 8,85:1
también — un bloque esmeralda con texto hueso es legible sin
reservas.
--navy-deep es el mismo verde llevado a noche para énfasis
puntual (12,84:1), no otro color.
========================================================== */
--navy: #124E3A; /* ESMERALDA DE MARCA, hex exacto · 8,85:1 */
--navy-deep: #0B3227; /* esmeralda noche · énfasis puntual · 12,84:1 */
/* ==========================================================
ACENTO — EL CORAL. La energía
----------------------------------------------------------
#E2653B (HSL 15·74·56), hex exacto. Es naranja-coral, jamás
rojo: a 15° está lejos del #c8102e de KW España (352°) y del
#cd2127 de Legacy (358°) — no la hace leer como submarca de
nadie. Vive en los momentos-héroe: el haz del faro, Madrid
latiendo, el signo de la 11.
SU LÍMITE, MEDIDO: 3,13:1 sobre hueso. Es color de gráfico,
de fondo y de filete — y de titular grande (AA-grande, ≥24px
o ≥18,66px bold). No es color de texto corrido.
--accent-ink es el coral cuando tiene que escribir: mismo hue
(15°), misma saturación (74), bajado a L36 para dar 6,19:1.
Es el token que el motor ya usa en 60 reglas `color:`.
========================================================== */
--accent: #E2653B; /* CORAL, hex exacto · 3,13:1 — gráfico, no texto */
--accent-ink: #A03A18; /* coral tinta · 6,19:1 — el coral cuando escribe */
--accent-tint:rgba(226,101,59,.07); /* sombra de color en atmósferas */
/* ==========================================================
ORO Y DATOS — el remate raro y la cifra
----------------------------------------------------------
El oro entra con su hex exacto y con una sola condición:
2,23:1 sobre hueso — NUNCA texto, ni grande. Filete, canto,
remate, subrayado. Premium por escasez, como pide el sistema.
--accent-2 es el oro cuando tiene que escribir sobre hueso:
mismo hue (39°), llevado a L29 → 5,73:1.
--data lleva las cifras y los gráficos de dato en la familia
del coral, un paso más claro que --accent-ink (5,09:1), para
que el número tenga la energía del acento sin perder AA.
--data-tint es el rebote cálido que el motor consume en
portada, S01 y movimiento.css: se queda en coral para que la
atmósfera no se enfríe.
========================================================== */
--gold: #C6A15B; /* ORO, hex exacto · 2,23:1 — jamás texto. USO RARO */
--accent-2: #7E5A18; /* oro tinta · 5,73:1 — el oro cuando escribe */
--data: #B6421B; /* cifras y gráficos · 5,09:1 · familia coral */
--data-tint: rgba(226,101,59,.10);
/* ==========================================================
SEMÁNTICOS — cero rojo saturado. Prohibición dura: #c8102e
(KW España) y #cd2127 (Legacy). --warn es tierra quemada a
25°, a 150° del rojo prohibido, y separado del coral (15°)
lo bastante para no confundirse con el acento.
--ok desciende del esmeralda: la confianza es de la familia
de la marca, no un verde ajeno.
========================================================== */
--ok: #1F6B4A; /* confianza · esmeralda claro · 5,91:1 */
--warn: #8E4A18; /* riesgo · tierra quemada, NO rojo · 6,13:1 */
/* ==========================================================
LÍNEAS — la retícula se insinúa, no se impone. Mismo matiz
del hueso: el filete es papel con densidad, no un gris ajeno.
========================================================== */
--rule: #DEDCD5; /* 1,26:1 sobre papel — visible, sin peso */
--rule-soft: #EDECE8; /* 1,08:1 — separación apenas dicha */
/* ==========================================================
ACENTO POR ESCENA — el recorrido de la pieza
----------------------------------------------------------
Se conserva el principio: una sola familia que avanza por
PROFUNDIDAD, no por cambio de color. Ningún escalón entra en
rojo, ninguno entra en coral: la escalera es la ESTRUCTURA de
la pieza, y la estructura es esmeralda. El coral no se gasta
en navegación; se guarda para los momentos-héroe.
El cuarto escalón ES el color de marca, hex exacto: la pieza
escala hasta el esmeralda y sigue dos escalones hacia la
noche. Contraste medido sobre --paper: de 5,01 a 13,34 — el
piso queda por encima de AA en los seis escalones.
========================================================== */
--sc-01: #2D7659; /* esmeralda claro · 5,01:1 */
--sc-02: #21634A; /* esmeralda medio · 6,53:1 */
--sc-03: #195840; /* esmeralda · 7,67:1 */
--sc-04: #124E3A; /* ESMERALDA DE MARCA · 8,85:1 (= --navy, hex exacto) */
--sc-05: #0E3F2F; /* esmeralda hondo · 10,88:1 */
--sc-06: #092F24; /* esmeralda noche · 13,34:1 */
/* --- Tipografía (self-hosted en assets/fonts/) — SIN CAMBIOS ---
Fraunces (serif variable de alto contraste) es lo que pide el
brief para titular: el nombre propio debe leer PERSONA, no
evento. Archivo cubre ES/EN idéntico por diseño. JetBrains
Mono para antetítulos, cifras, etiquetas y el rótulo.
PROHIBIDA Barlow Condensed: es la display del anfitrión. */
--display: "Fraunces", Georgia, "Times New Roman", serif;
--sans: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
/* --- Escala tipográfica (fluida, no-scroll) — SIN CAMBIOS --- */
--fs-eyebrow: clamp(.62rem,.78vw,.74rem);
--fs-lead: clamp(1.1rem,1.7vw,1.5rem);
--fs-h1: clamp(2.6rem,5.4vw,5.4rem);
--fs-h2: clamp(1.9rem,3.6vw,3.4rem);
--fs-body: clamp(.95rem,1.05vw,1.06rem);
/* --- Retícula / espaciado — SIN CAMBIOS --- */
--wrap: min(1240px, 92vw);
--gutter: clamp(20px,4vw,56px);
--nav-w: clamp(64px,7vw,96px);
--radius: 14px;
/* --- Motion (sobrio; se anula con prefers-reduced-motion) — SIN CAMBIOS --- */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-in:cubic-bezier(.5,0,.75,0);
--dur-fast: 240ms;
--dur: 420ms;
--dur-slow: 720ms;
/* --- Sombras (mínimas, recoloreadas al matiz de la tinta: la
sombra desciende del casi-negro cálido del sistema, no de un
gris azulado ajeno). --- */
--shadow-1: 0 1px 2px rgba(30,27,24,.05), 0 8px 24px rgba(30,27,24,.08);
--shadow-2: 0 2px 4px rgba(30,27,24,.06), 0 18px 48px rgba(30,27,24,.12);
/* --- Velo de papel sobre foto (el motor lo consume como
--mv-papel-luz / --pt-luz / --s1-luz). Mismo hueso,
translúcido: el velo y el fondo de la lámina son la misma
materia. --- */
--paper-warm: rgba(246,245,242,.86);
/* ==========================================================
BLOQUE --cr-* · EL RE-TINTE DE LAS 19 INFOGRAFÍAS
----------------------------------------------------------
Los 19 SVG de `Assets Dali/02_INFOGRAFIAS_SVG/` no consumen
los tokens del motor: consumen `--cr-*` con un valor por
defecto embebido en cada archivo. Se hizo así porque el motor
heredado define `--accent: #D22730` (rojo saturado), prohibido
para esta clienta. Ese aislamiento se conserva: aquí no se
cablea --cr-accent a --accent, se le da su propio valor.
Este bloque es el ÚNICO lugar desde el que se re-tinta el set
entero. Vive en tokens-create.css —y no en un archivo aparte—
porque ésta es la primera y única hoja de tokens del
de las doce láminas: un solo origen, cero orden de carga que
resolver.
CONDICIÓN DE FUNCIONAMIENTO (medida, no supuesta): las
variables CSS solo alcanzan al SVG si el SVG está EN LÍNEA en
el documento. Un SVG traído con , background-image o