/* ============================================================
LON Design System · tokens.css (RECONSTRUIDO 2026-07-08)
------------------------------------------------------------
El archivo original se perdió: nunca entró en git y no está en
disco. Los 13 HTML lo enlazan (assets/tokens.css?v=3ea51c38),
así que las 13 páginas devolvían 404 y ninguna variable resolvía.
Fuentes de esta reconstrucción, en orden de autoridad:
[R] RECUPERADO · website/components/index.html, sección
"Tokens > Paleta primaria y neutra" y
"Radios". Los swatches imprimen el hex y el
nombre del token. Es documentación del propio
design system, no deducción.
[B] BRANDBOOK · assets/brand/brand-tokens.md (oficial).
[D] DEDUCIDO · del uso real en components.css y site.css
(valores hardcodeados, pares fondo/texto,
fallbacks de @supports).
[I] INFERIDO · sin evidencia directa. Pendiente de validar
con el CEO contra el render.
Los componentes consumen SOLO la capa semántica, nunca el hex.
Regla del brandbook respetada: cero border decorativo >= 2px.
============================================================ */
/* ---- Tipografía self-hosted. Cero Google Fonts (RGPD).
Space Grotesk es la elegida por el CEO el 2026-07-07 para
toda la web (biblioteca de componentes, ficha de la fuente).
Es la única familia presente en assets/fonts/ del build. [R] ---- */
@font-face {
font-family: "Space Grotesk";
src: url("fonts/space-grotesk-variable.woff2") format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
/* ------------------------------------------------------------
PALETA DE MARCA · decisión CEO 2026-07-08
La web se construyó sobre terracota #A0522D, que brand-tokens.md
sección 10 declara "token provisional inventado, necesita sweep
correctivo". El color oficial del brandbook es el rojizo #b83e25,
que es además el que la web en producción ya usa hoy.
Se sustituye la familia terracota por la familia rojizo oficial.
Coste de accesibilidad: cero (5,13:1 antes, 5,11:1 ahora, crema
sobre relleno de marca).
Familia anterior, por si hay que revertir:
--terracotta: #A0522D · --terracotta-deep: #7A3D20
--terracotta-light: #C97B57
------------------------------------------------------------ */
:root {
/* ========== PRIMITIVOS (paleta de la web) ========== */
--rojizo: #b83e25; /* [B] brandbook, color PRINCIPAL LON · --brand */
--rojizo-oscuro: #8a2e1c; /* [B] brandbook · --brand-strong */
--rojizo-claro: #d05e44; /* [B] brandbook · solo fondos y brillos */
--beige: #d9c8b1; /* [B] brandbook, color COMPLEMENTARIO */
--beige-claro: #ece0cb; /* [B] brandbook */
--clay: #B07050; /* [R] Arcilla */
--sand: #D7B98E; /* [R] Arena */
--cream: #FAF4EA; /* [R] Crema · fondo claro */
--parchment: #F0E6D2; /* [R] Pergamino · panels */
--ink: #1C1410; /* [B] Tinta · el negro de LON. Sale del manual de
marca (04-manual-marca-resumen). El tema tenía
#2A1F18, más claro, que no aparece en la marca:
desviación del port corregida el 2026-08-07 junto
con los 18 scrims que la copiaban a mano */
--green-sf: #6F8F5B; /* [R] Verde San Fernando · solo su proyecto */
--blue-nido: #3D7A8C; /* [R] Azul El Nido · solo su proyecto */
--amber: #D89B45; /* [R] Ámbar · warn / roadmap */
--flame: #DD4A2C; /* [R] Llama · acento alternativo (CEO 2026-07-07) */
--coral: #EB674C; /* [R] Coral · acento alternativo (CEO 2026-07-07) */
--dark-bg: #1A130D; /* [R] Fondo oscuro · dark */
--white: #FFFFFF; /* [D] hover por encima de crema */
/* ========== SEMÁNTICOS · modo claro ========== */
--bg: var(--cream); /* [R] "fondo claro" */
--surface: var(--white); /* [I] cards elevadas sobre bg con sh-1 */
--panel: var(--parchment); /* [R] "panels" */
--line: #C9B89C; /* [B] --lon-rule, hairline 1px */
--glass: color-mix(in srgb, var(--cream) 72%, transparent); /* [D] el @supports de nav-pills cae a bg 92% */
--text: var(--ink); /* [R] "texto" */
--text-muted: #5C4A3D; /* [B] --lon-tinta-dim · 7.67:1 sobre crema */
--text-soft: #736357; /* [B] --lon-tinta-soft · 3.77:1, solo captions */
--brand: var(--rojizo); /* [B] */
--brand-strong: var(--rojizo-oscuro); /* [B] · 7,71:1 sobre crema */
--brand-fill: var(--rojizo); /* [D] .btn-primary fondo */
--brand-fill-strong: var(--rojizo-oscuro); /* [D] .btn-primary:hover, más oscuro */
--brand-contrast: var(--cream); /* [D] texto sobre brand-fill · 5,11:1 */
--ink-dim: #3E2E22; /* [I] hover de .btn-ink */
--accent-sf: var(--green-sf); /* [R] punto del tag San Fernando */
--accent-nido: var(--blue-nido); /* [R] punto del tag El Nido */
--accent-flame: var(--flame); /* [R] */
--accent-coral: var(--coral); /* [R] */
--ok: var(--green-sf); /* [I] check verificado. Sin uso en las 13 páginas */
/* --dock-bg NO se define aquí a propósito: .hero-dock usa
var(--dock-bg, var(--bg)) y cada contenedor lo sobrescribe con
el color EXACTO del fondo que sostiene la máscara. Definirlo en
:root mataría el fallback y pintaría crema sobre pergamino. */
/* ========== TIPOGRAFÍA ========== */
--font-display: "Space Grotesk", "Galano Grotesque Alt", "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* [R] */
--font-body: "Space Grotesk", "Galano Grotesque Alt", "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* [R] */
/* ========== RADIOS · ley del 25 % del grafismo LON ========== */
--r-sm: 8px; /* [R] */
--r-md: 12px; /* [R] */
--r-lg: 16px; /* [R] */
--r-xl: 20px; /* [R] canónicos 8/12/16/20/24 */
--r-hero: 24px; /* [R] */
--r-frame: 32px; /* [R] marco de navegación */
--r-pill: 999px; /* [R] */
--r-mask: 36px; /* Orden CEO 2026-07-08: radio de referencia 36px en todas
las esquinas menos la de la muesca. Deroga el "72 a 140px
fluidos" que documentaba la biblioteca y que seguían 10 de
las 13 páginas. Es cambio visual deliberado sobre el fuente. */
/* ========== SOMBRAS · cálidas, tintadas con rojizo oscuro ========== */
--sh-1: 0 1px 2px rgba(138, 46, 28, .06); /* [B] verbatim brandbook sección 7 */
--sh-2: 0 4px 14px rgba(138, 46, 28, .08), 0 1px 3px rgba(138, 46, 28, .04); /* [B] verbatim brandbook */
--sh-3: 0 12px 32px rgba(138, 46, 28, .10), 0 4px 8px rgba(138, 46, 28, .05); /* [B] verbatim brandbook */
/* ========== ESPACIADO · escala 8pt ========== */
--s-1: 4px; /* [I] */
--s-2: 8px; /* [I] */
--s-3: 12px; /* [I] */
--s-4: 16px; /* [I] */
--s-5: 24px; /* [I] */
--s-6: 32px; /* [I] */
--s-7: 48px; /* [I] */
--s-8: 64px; /* [I] */
}
/* ============================================================
MODO OSCURO
Los PRIMITIVOS no se voltean: --ink y --cream siguen fijos.
Por eso components.css necesita 7 reglas [data-theme="dark"]
explícitas (.stats-premium, .btn-ink, .form-premium...) que
cambian de --ink a --panel. Solo se voltea la rampa semántica
de superficie y texto. Todo este bloque es [I] salvo --bg.
============================================================ */
:root[data-theme="dark"] {
--bg: var(--dark-bg); /* [R] #1A130D "dark" */
--surface: #241A12;
--panel: #2E2219;
--line: #40332A;
--glass: color-mix(in srgb, var(--dark-bg) 72%, transparent);
--text: #F3E9DA;
--text-muted: #C3B4A3;
--text-soft: #97877A;
/* El rojizo puro da 3,28:1 sobre el fondo oscuro y el rojizo-claro 3,95:1
sobre el panel: ninguno llega a AA para texto. Se aclara el rojizo-claro
hacia el beige-claro del brandbook hasta 4,94:1 sobre panel. Los dos
extremos de la mezcla salen del brandbook, no hay color inventado. */
--brand: color-mix(in srgb, var(--rojizo-claro) 80%, var(--beige-claro));
--brand-strong: var(--rojizo-claro);
--brand-fill: var(--rojizo);
--brand-fill-strong: var(--rojizo-oscuro); /* hover oscurece tambien en dark: aclarar dejaba el texto crema en 3,6:1 (fix AA 2026-07-16) */
--sh-1: 0 1px 2px rgba(0, 0, 0, .40);
--sh-2: 0 4px 14px rgba(0, 0, 0, .48), 0 1px 3px rgba(0, 0, 0, .32);
--sh-3: 0 12px 32px rgba(0, 0, 0, .56), 0 4px 8px rgba(0, 0, 0, .36);
}
/* ---- Base mínima de página (ningún otro CSS del build la declara) ---- */
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 400 16px/1.6 var(--font-body);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.container { margin-inline: auto; }
/* ---- Enlaces de prosa. Ningún CSS del build estiliza el desnudo:
hoy salen en el azul #0000EE del navegador (1.64:1 sobre el panel
oscuro, ilegible). Mismo patrón que .prose-xl em: brand-strong en
claro (7.63:1), brand en oscuro (4.75:1). Los con clase propia
(.btn, .tag-pill, nav, .footer a) ganan por especificidad. [D] ---- */
/* Enlaces de prosa, SOLO anchors sin clase y con especificidad CERO via
:where(): cualquier componente (.btn-*, .footer-dark a, nav, cards) gana
siempre con su propia regla. Antes las reglas planas a/a:hover machacaban
por especificidad el color de los botones-enlace en hover (rojizo sobre
rojizo-oscuro 1,5:1 en claro; salmon sobre rojizo 1,78:1 en oscuro).
Fix contraste AA 2026-07-16. */
:where(a:not([class])) { color: var(--brand-strong); text-underline-offset: 3px; }
:where(a:not([class]):hover) { color: var(--brand); }
:where([data-theme="dark"]) :where(a:not([class])) { color: var(--brand); }
:where([data-theme="dark"]) :where(a:not([class]):hover) { color: var(--sand); }
/* ---- .skip-link y .sr-only se usan en los 13 HTML y NO tienen regla
en components.css ni en site.css. Vivían aquí. Sin ellas el enlace
"Saltar al contenido" se pinta visible sobre el header. [D] ---- */
.sr-only {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 14px; top: -100px; z-index: 200;
background: var(--surface); color: var(--text);
font: 600 14px/1 var(--font-body); text-decoration: none;
padding: 14px 18px; border-radius: var(--r-pill); box-shadow: var(--sh-2);
transition: top .18s ease;
}
.skip-link:focus { top: 14px; }
/* ------------------------------------------------------------
COMPAT · familia paralela de la calculadora (.calc-lon) [D]
La calculadora se construyo en otra sesion con su propia
familia de tokens (--lon-red*). Alias hacia la paleta canonica
para que resuelvan sin duplicar hex. Gotcha: familias de tokens
paralelas (--brand vs --rust vs --rojizo).
------------------------------------------------------------ */
:root {
--lon-red: var(--rojizo);
--lon-red-deep: var(--rojizo-oscuro);
--lon-red-earth: #A0522D; /* terracotta de la familia anterior (ya no es token activo, hex documentado arriba) */
--focus-ring: var(--brand-strong);
/* --dock-bg NO se define en :root a proposito: ver nota de la seccion semantica */
}