/* ============================================================
LIRA · "Primero la gente" — Buñuelo PH — Sistema de tokens (OVERRIDE)
Diseñador de Interfaz (el Vitralista) · Cockpit C · Nómina Dalí
Encargo: 2026-09-09__TL-LIRAPRES-001C__ESTACION1_FUNDACION_Y_PORTADA
Storyboard de dirección: STORYBOARD_GRAFICO__DALI__BUNUELO_PH.md §0.1
QUÉ ES ESTE ARCHIVO
Override completo y uno-a-uno del ancla `tokens.css` del motor.
Conserva TODOS los nombres de variable del original: el chasis, la
capa de elevación, la de movimiento y las siete pantallas consumen
estos tokens. Solo cambian los VALORES. Es la primera hoja del
de cada pantalla; no hay tokens.css debajo.
Define además el bloque `--cr-*`, único lugar desde el que se
re-tintan los SVG en línea de la pieza (§ al final).
------------------------------------------------------------
DE DÓNDE VIENE
El motor es el clon verificado de la presentación de Claudia
Restrepo / CREATE. Aquel sistema era hueso + esmeralda #124E3A +
coral #E2653B + oro #C6A15B. Ese esmeralda, ese coral y ese oro
son de otra pieza y de otra persona: salen enteros. Entra Lira.
------------------------------------------------------------
EL SISTEMA LIRA (locked — estas cuatro anclas son la vara)
Fondo dominante #F6F5F2 hueso neutro limpio (se conserva)
Tinta principal #1E1B18 casi-negro cálido (se conserva)
Azul de marca #127AB4 estructura
Terracota #CE7446 el acento, la energía, la luz
Gris de marca #868589 el filete, el remate (releva al oro)
Las anclas entran con su hex exacto, sin retoque. Todo lo demás
de este archivo es DERIVACIÓN MEDIDA de ellas: cada valor se
situó buscando por luminosidad —conservando hue y saturación—
la posición exacta que cruza el piso WCAG pedido. Se midió con
el motor de un navegador real (luminancia relativa sRGB, WCAG
2.1 §1.4.3); evidencia en `_qa/disenador-de-interfaz/medicion/`.
NOTA DE FIDELIDAD (declarada, no corregida por cuenta propia):
los logos oficiales de `Assets/0_LOGOS/` traen #1079b2 y #cf7448.
El storyboard fija #127AB4 y #CE7446 como tokens del sistema. La
diferencia es de un par de puntos por canal, imperceptible en
pantalla, pero existe: manda el storyboard, y el logo entra por
compositing con sus propios píxeles intactos. Queda dicho.
------------------------------------------------------------
LEY DE LEGIBILIDAD DE ESTE SISTEMA (medida, no estimada)
Sobre el hueso #F6F5F2:
· el AZUL DE MARCA #127AB4 mide 4,31:1 → NO es color de texto
de cuerpo. Es color de bloque, cenefa, filete y titular
grande (AA-grande ≥24px o ≥18,66px bold, piso 3:1). Cuando
el azul tiene que ESCRIBIR, escribe --navy-deep (7,26:1).
· la TERRACOTA #CE7446 mide 3,10:1 → NO es color de texto.
Solo gráfico, fondo, filete y titular grande. Cuando la
terracota escribe, escribe --accent-ink (6,03:1) o --data
(5,03:1).
· el GRIS DE MARCA #868589 mide 3,36:1 → NUNCA texto. Filete y
remate. Cuando el gris escribe, escribe --accent-2 (5,72:1).
LA LEY DE LA POLARIDAD (lo que más se olvida y aquí está medido):
· sobre bloque TERRACOTA, el único texto que pasa AA es la
tinta #1E1B18 (5,07:1). El hueso encima mide 3,10 → no pasa.
· sobre bloque AZUL DE MARCA #127AB4 NO PASA NINGUNA POLARIDAD
en cuerpo normal: hueso encima 4,31 · tinta encima 3,65.
Un bloque de marca lleva TITULAR GRANDE, no párrafo. Si hay
párrafo, el bloque baja a --navy-deep (hueso encima 7,26:1).
· sobre bloque AZUL NOCHE #0C567F el hueso mide 7,26:1 ✓.
(Y aun así: la baranda de esta pieza prohíbe el fondo oscuro
dominante — el bloque oscuro es una pieza, nunca la lámina.)
============================================================ */
:root{
/* ==========================================================
PAPEL — hueso neutro limpio. SE CONSERVA.
----------------------------------------------------------
#F6F5F2 es el fondo dominante, y en esta pieza además es
baranda de dirección: BLANCO PREDOMINANTE. Claro y sin el
amarillo del crema por defecto (HSL 45·18·96 — el matiz
existe pero a croma casi nulo: blanco con temperatura, no un
color). Sobre él la tinta cálida da 15,72:1: el sistema
entero descansa en un papel que no compite con nada.
========================================================== */
--paper: #F6F5F2; /* lienzo principal — hueso. Único fondo de pantalla */
--paper-2: #FCFCFA; /* tarjetas y capas elevadas — eleva sin blanco puro */
--paper-3: #EAE8E2; /* zonas de reposo, bandejas, tablas */
/* ==========================================================
TINTA — casi-negro cálido. SE CONSERVA.
----------------------------------------------------------
#1E1B18 (HSL 30·11·11) es negro con temperatura, nunca negro
azulado. Los dos derivados bajan autoridad sin salirse del
hue. Se conservan porque son papel y tinta de imprenta fina,
no marca de nadie, y porque los tres pasan AA medidos.
========================================================== */
--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 (pasa AA) */
/* ==========================================================
ESTRUCTURA — EL AZUL DE LIRA. El color de marca
----------------------------------------------------------
El token se sigue llamando --navy porque el motor lo consume;
su valor es el azul de Lira #127AB4, hex exacto. Aquí vive la
estructura del sistema: cenefas, bloques, el núcleo de las
infografías, la fachada del edificio de la portada.
SU LÍMITE, MEDIDO: 4,31:1 sobre hueso. Es color de BLOQUE y
de TITULAR GRANDE, no de párrafo — ni escribiendo él, ni
escribiendo el hueso encima de él (ver LEY DE LA POLARIDAD).
--navy-deep es el mismo azul llevado a noche, #0C567F, hex
exacto del storyboard: 7,26:1. Es el azul que SÍ escribe, y
el bloque que SÍ puede llevar párrafo en hueso. Énfasis
puntual: jamás fondo dominante (baranda de David).
========================================================== */
--navy: #127AB4; /* AZUL DE MARCA, hex exacto · 4,31:1 — bloque, no texto */
--navy-deep: #0C567F; /* azul noche · 7,26:1 — el azul cuando escribe */
/* ==========================================================
ACENTO — LA TERRACOTA. La energía y la luz
----------------------------------------------------------
#CE7446 (HSL 20·58·54), hex exacto. Vive en los momentos-héroe:
las ventanas que se encienden en la portada, las neuronas de
la S4, las 15 luces del cierre. Es la LUZ de esta pieza.
SU LÍMITE, MEDIDO: 3,10:1 sobre hueso. Es color de gráfico,
de fondo, de filete — y de titular grande (AA-grande, ≥24px o
≥18,66px bold). No es color de texto corrido.
--accent-ink es la terracota cuando tiene que escribir: mismo
hue (20°), misma saturación (58), bajada a L36 para dar
6,03:1. Es el token que el motor consume en sus reglas
`color:` (filas, numerales, títulos de panel).
========================================================== */
--accent: #CE7446; /* TERRACOTA, hex exacto · 3,10:1 — gráfico, no texto */
--accent-ink: #904A26; /* terracota tinta · 6,03:1 — la terracota cuando escribe */
--accent-tint:rgba(206,116,70,.07); /* sombra de color en atmósferas */
/* ==========================================================
GRIS DE MARCA Y DATOS — el remate raro y la cifra
----------------------------------------------------------
El oro de la pieza anterior SE RETIRA (orden del storyboard).
Su ranura —el remate raro, premium por escasez— la ocupa el
GRIS DE MARCA #868589, tercer color del logo de Lira. Entra
con su hex exacto y con una sola condición: 3,36:1 sobre
hueso — NUNCA texto, ni grande. Filete, canto, remate.
El token se sigue llamando --gold porque el motor lo consume
en tres sitios; su valor ya no es oro.
--accent-2 es el gris cuando tiene que escribir sobre hueso:
mismo matiz neutro, llevado a L38 → 5,72:1.
--data lleva las cifras y los gráficos de dato en la familia
de la terracota, un paso más claro que --accent-ink (5,03:1),
para que el número tenga la energía del acento sin perder AA.
Aquí vivirá la cifra gigante de 17–19 millones de la S3.
--data-tint es el rebote cálido que el motor consume en el
papel y en las atmósferas: se queda en terracota para que la
luz de la pieza no se enfríe.
========================================================== */
--gold: #868589; /* GRIS DE MARCA, hex exacto · 3,36:1 — jamás texto. USO RARO */
--accent-2: #616064; /* gris tinta · 5,72:1 — el gris cuando escribe */
--data: #A3532B; /* cifras y gráficos · 5,03:1 · familia terracota */
--data-tint: rgba(206,116,70,.10);
/* ==========================================================
SEMÁNTICOS — cero rojo saturado, cero estética de miedo
(baranda del storyboard: cero miedo, cero ciencia ficción).
--ok desciende del azul de marca: la confianza es de la
familia de Lira, no un verde ajeno. --warn es tierra quemada
a 25°, lejos de cualquier rojo de alarma, y separada de la
terracota (20°) lo justo para no confundirse con el acento.
Hoy ninguna hoja viva del motor los consume; quedan medidos y
listos para cuando una pantalla los necesite.
========================================================== */
--ok: #0F6493; /* confianza · azul de marca hondo · 5,90:1 */
--warn: #8E4C18; /* riesgo · tierra quemada, NO rojo · 6,02:1 */
/* ==========================================================
LÍNEAS — la retícula se insinúa, no se impone.
----------------------------------------------------------
El storyboard retira el oro y deja "gris de marca tenue" en
el papel del filete. Se cumple por MATIZ, no por densidad: el
hilo se muda del matiz cálido del hueso al matiz neutro del
gris de Lira (255°, croma casi nulo) y conserva su peso de
hilo. Medido: 1,26:1 y 1,08:1 sobre papel — exactamente el
peso que tenía el sistema anterior. Un filete a 3,36:1 (el
gris pleno) no sería una retícula insinuada: sería una reja,
y reescribiría de golpe cada borde de tarjeta del motor.
========================================================== */
--rule: #DCDBDE; /* 1,26:1 sobre papel — visible, sin peso */
--rule-soft: #EDECEE; /* 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
terracota: la escalera es la ESTRUCTURA de la pieza, y la
estructura es azul. La terracota no se gasta en navegación;
se guarda para los momentos-héroe (las luces).
Los TRES hexes que nombra el storyboard entran exactos:
#2E8BC4 (claro) en el 01, #127AB4 (marca) en el 03 y #0C567F
(noche) en el 05. El 02 y el 04 son las medias medidas entre
ellos; el 06 prolonga la noche para que la escalera conserve
recorrido real de profundidad (3,44 → 10,38).
El color de marca cae en el peldaño 03 y no en el 04 como en
el sistema anterior: es lo que impone anclar los tres hexes
del storyboard. Declarado, no escondido.
LEY DE TEXTO DE LA ESCALERA (medida, peldaño a peldaño —
"sobre papel" = el peldaño escribiendo · "hueso encima" =
bloque de ese peldaño con texto hueso · "tinta encima" =
bloque de ese peldaño con texto tinta):
01 3,44 · hueso 3,44 ✗ · tinta 4,58 ✓ → bloque con tinta
02 3,82 · hueso 3,82 ✗ · tinta 4,11 ✗ → SIN TEXTO DE CUERPO
03 4,31 · hueso 4,31 ✗ · tinta 3,65 ✗ → SIN TEXTO DE CUERPO
04 5,56 · hueso 5,56 ✓ · tinta 2,83 ✗ → bloque con hueso
05 7,26 · hueso 7,26 ✓ · tinta 2,17 ✗ → bloque con hueso
06 10,38 · hueso 10,38 ✓ · tinta 1,51 ✗ → bloque con hueso
Los peldaños 02 y 03 son PROFUNDIDAD, no soporte de párrafo.
Ahí va titular grande (piso 3:1) o no va texto. Es la misma
ley que el sistema anterior aplicaba al coral y al oro: el
color de marca no siempre puede escribir, y eso se mide.
========================================================== */
--sc-01: #2E8BC4; /* azul claro · 3,44:1 (hex del storyboard) */
--sc-02: #1F83BD; /* azul medio · 3,82:1 */
--sc-03: #127AB4; /* AZUL DE MARCA · 4,31:1 (= --navy, hex exacto) */
--sc-04: #0F689A; /* azul hondo · 5,56:1 */
--sc-05: #0C567F; /* AZUL NOCHE · 7,26:1 (= --navy-deep, hex exacto) */
--sc-06: #093E5C; /* azul noche honda · 10,38:1 */
/* --- Tipografía (self-hosted en assets/fonts/) — RECABLEADA ---
Sale Fraunces (serif de alto contraste: era para que un nombre
propio leyera PERSONA) y sale Archivo. Entra POPPINS para
titular —geométrica, humana, sin adorno, la voz formal y
cálida que pide esta charla— y SOURCE SANS 3 para cuerpo, que
es una humanista de lectura larga y trae eje variable de peso.
JetBrains Mono se conserva para antetítulos, cifras y rótulos.
NOTA PARA QUIEN ANIME: Poppins es de pesos ESTÁTICOS (400 /
500 / 600 / 700). La gramática de movimiento compone titulares
por ejes variables (`opsz`/`wght`); sobre Poppins esos ejes no
existen y el motor los ignora sin romper nada — la composición
queda en tracking, alza y opacidad. Source Sans 3 SÍ es
variable (wght 200–900), así que el cuerpo conserva el eje.
Ninguna de las dos pide red: las dos viven en assets/fonts/. */
--display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
--sans: "Source Sans 3", "Source Sans Pro", 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). SIN CAMBIOS. --- */
--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). Mismo hueso, translúcido: el velo
y el fondo de la pantalla son la misma materia. --- */
--paper-warm: rgba(246,245,242,.86);
/* ==========================================================
BLOQUE --cr-* · EL RE-TINTE DE LOS SVG EN LÍNEA
----------------------------------------------------------
Los SVG de infografía de la pieza no consumen los tokens del
motor: consumen `--cr-*` con un valor por defecto embebido en
cada archivo. Ese aislamiento se conserva y se RE-APUNTA a
Lira: aquí nacen los SVG nuevos (fachada del edificio, íconos
de necesidades, mapa del viaje, la cifra gigante).
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