/* ⚠ COPIA AUTOMÁTICA · NO EDITAR ESTE ARCHIVO ⚠
   El original vive en `website/design-system/tokens.css` y se reparte con
   `_scripts/sync-design-system.py`. Cualquier cambio hecho aquí se pierde en la
   siguiente sincronización. Para cambiar un color, un radio o una tipografía en
   TODOS los productos a la vez, se edita el original y se ejecuta el programa. */

/* ============================================================
   LON Design System · tokens.css
   Fuente única de tokens. Los componentes SOLO consumen la capa
   semántica. Paleta canónica corregida por el CEO el 2026-07-08 (rojo
   LON #B83E25, familia de la calculadora oficial).

   NEUTROS SIN TINTE (CEO, 2026-08-08). Los negros y grises eran cálidos, con una
   pizca de naranja dentro. Mirando el laboratorio en oscuro: «no quiero tintas
   naranjas, quiero negro puro, puede ser en diferentes shades, pero sin ningún
   color, se ve vintage y no me gusta». Toda la escala de grises pasa a neutra pura
   y las sombras, de tinta cálida a negro. DEROGA el «cero negro puro, sombras de
   tinta cálida» que encabezaba este archivo desde el 2026-07-08. Cada neutro nuevo
   conserva la CLARIDAD del que sustituye, así que ningún contraste empeora: lo
   único que se va es el matiz. Lo que NO se toca: el rojo, el naranja del logotipo,
   la arena, el verde de San Fernando, el azul de El Nido, y los fondos claros
   (crema y beige), que son el papel de la marca y no un negro con tinte.

   ESTE ARCHIVO ES LA FUENTE ÚNICA. Vive en `website/design-system/` y se reparte a
   todos los productos con `_scripts/sync-design-system.py`. NO se edita ninguna de
   las copias: se edita este y se sincroniza.
   ============================================================ */

/* ---- Tipografía oficial LON (archivos locales, sin dependencia externa) ---- */
@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("fonts/galano-grotesque-alt-light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("fonts/galano-grotesque-alt-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("fonts/galano-grotesque-alt-medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque Alt";
  src: url("fonts/galano-grotesque-alt-semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-variable.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ---- Capa 1 · Primitivos (corrección de paleta CEO 2026-07-08: el rojo
        LON es #B83E25; hexes alineados con la calculadora oficial y la web
        del cliente. La paleta previa (#A0522D "terracota") queda derogada
        también en el manual de marca del brain.) ---- */
:root {
  /* -- PRIMARIOS (marca) -- */
  --lon-red: #B83E25;        /* rojo LON, identidad principal */
  --lon-red-deep: #A6372B;   /* hover / sombra del primario */
  --lon-red-earth: #7A241C;  /* profundidad, gradients de marca */
  --cream: #FAF7F4;          /* fondo principal claro */
  --ink: #141414;            /* tinta de texto */
  /* EL COLOR DE LA LETRA SOBRE FONDO `--ink`. Lo piden cinco componentes de la casa
     (el boton oscuro, la banda de cifras, el testimonial premium, la banda de cierre
     y el pie oscuro) y NO ESTABA DEFINIDO EN NINGUN SITIO. Cuando un color no existe,
     el navegador tira la linea entera sin dar ni un aviso: la letra se quedaba con la
     que hereda del cuerpo, que en tema CLARO es casi negra, encima de un fondo casi
     negro. Medido el 2026-09-05 en la pagina del ecosistema: tres de las cuatro cifras
     de la banda con contraste 1,00, invisibles. Es la trampa 125 del catalogo.
     Va fijo, no gira con el tema, porque `--ink` tampoco gira. */
  --on-ink: #FAF7F4;         /* = --cream, la letra que se lee sobre --ink */
  /* LA LETRA SOBRE FONDO CLARO FIJO (`--cream`). La piden cinco botones de la casa y
     TAMPOCO estaba definida. En tema oscuro esos botones heredaban la letra clara del
     tema y quedaban color crema sobre fondo crema. Medido el 2026-09-05 en el pie de la
     web: el boton «Agenda una llamada» con contraste 1,05, o sea blanco sobre blanco.
     Va fija, no gira con el tema, porque `--cream` tampoco gira. */
  --on-veil-light: #141414;  /* = --ink, la tinta que se lee sobre --cream */

  /* -- SECUNDARIOS (acentos) -- */
  --sand: #E8A13A;           /* arena / warn */
  --accent-sf: #6F8F5B;      /* San Fernando · Camarines Sur */
  --accent-nido: #3D7A8C;    /* El Nido · Palawan */
  /* Acentos alternativos aprobados por el CEO (2026-07-07), fuera del
     manual. AA solo en texto GRANDE sobre ellos. */
  --accent-flame: #DD4A2C;
  --accent-coral: #EB674C;

  /* -- NEUTROS -- */
  --white: #FFFFFF;
  --beige: #F3ECE4;          /* paneles y zonas de descanso */
  --ink-dim: #4A4A4A;        /* texto secundario */
  --ink-soft: #6B6B6B;       /* texto terciario / captions */
  --line-neutral: #E4E4E4;   /* hairlines de 1px */

  /* -- Estados -- */
  --ok: #6F8F5B;
  --warn: #E8A13A;
  --err: #A04050;

  /* -- Alias derogados (compatibilidad; NO usar en código nuevo) -- */
  --terracotta: var(--lon-red);
  --terracotta-deep: var(--lon-red-deep);
  --terracotta-light: color-mix(in srgb, var(--lon-red) 55%, var(--cream)); /* PROHIBIDO como color de texto */
  --clay: var(--lon-red-deep);
  --parchment: var(--beige);
  --rule-hairline: var(--line-neutral);
  --amber: var(--sand);

  /* ---- Capa 2 · Semánticos (los componentes consumen ESTOS) ---- */
  --bg: var(--cream);
  --surface: var(--white);
  --panel: var(--beige);
  --text: var(--ink);
  --text-muted: var(--ink-dim);
  --text-soft: var(--ink-soft); /* solo captions grandes o decorativos */
  --line: var(--line-neutral);
  --brand: var(--lon-red);
  --brand-strong: var(--lon-red-deep);
  --brand-fill: var(--lon-red);
  --brand-fill-strong: var(--lon-red-deep);
  --brand-contrast: var(--cream);
  --focus-ring: var(--lon-red-deep);
  --glass: color-mix(in srgb, var(--white) 82%, transparent);

  /* Tipografía elegida por el CEO para la web nueva (2026-07-07): Space
     Grotesk en TODOS los componentes (archivo local, variable 300-700).
     Galano Grotesque Alt queda cargada para la comparativa de la biblioteca. */
  --font-display: "Space Grotesk", "Galano Grotesque Alt", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Galano Grotesque Alt", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radios canónicos + ampliaciones del grafismo (ley del 25 %) */
  --r-pill: 999px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-hero: 24px;
  --r-frame: 32px;                          /* marco del navbar (ref 09) */
  --r-mask: clamp(72px, 12vw, 140px);       /* máscara hero = 25 % del alto, como la L del isologo */

  /* Sombras de tinta cálida (jamás negro) */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .06);
  --sh-2: 0 4px 14px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .05);
  --sh-3: 0 12px 32px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);

  /* Espaciado base 8 */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

  color-scheme: light;
}

/* ---- Modo oscuro: mismo set semántico, otros valores ----
   El tema por defecto es SIEMPRE claro; el oscuro SOLO se activa por
   [data-theme="dark"] explícito (toggle o localStorage guardado del
   usuario), NUNCA por la preferencia del sistema (regla de la casa
   OH WOW!, corregido 2026-07-10: el bloque @media que aquí aplicaba
   el oscuro automático a cualquier :root:not([data-theme="light"])
   quedaba fuera; el bloque de abajo [data-theme="dark"] ya cubre el
   mismo set de valores para cuando el usuario SÍ elige oscuro). ---- */
:root[data-theme="dark"] {
  --bg: #0E0E0E;
  --surface: #161616;
  --panel: #1F1F1F;
  --text: #F2F2F2;
  --text-muted: #B5B5B5;
  --text-soft: #8F8F8F;
  --line: #2E2E2E;
  --brand: #ED7F55;
  --brand-strong: #F49B78;
  --brand-fill: #ED7F55;         /* = --brand, el color del LOGO: los botones en oscuro van del color del logo (CEO 2026-07-13) */
  --brand-fill-strong: #F49B78;  /* hover: mas claro sobre fondo oscuro */
  --brand-contrast: #FFFFFF;     /* letras e iconos de boton en BLANCO en oscuro (CEO 2026-07-13) */
  --focus-ring: #F49B78;
  --glass: color-mix(in srgb, #161616 82%, transparent);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-2: 0 4px 14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
  --sh-3: 0 12px 32px rgba(0, 0, 0, .55), 0 4px 8px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   Enlace de salto al contenido: RETIRADO POR ORDEN DEL CEO
   (2026-08-31). Cita: «quítalo, que más nunca salga, en ningún
   sitio».

   Qué era: el atajo que aparece al tabular desde el teclado para
   saltarse el menú e ir directo al contenido.

   Por qué se vio: las piezas del laboratorio cargan la hoja de
   tokens del KIT de tableros, no la del cliente, y ahí no existía
   la regla que lo mandaba fuera de pantalla. Sin esa regla, el
   enlace se pintaba como texto normal en la esquina superior
   izquierda de cada pieza.

   Se ha quitado del marcado de las 52 páginas del laboratorio y
   del generador que lo escribía. Esta regla es el cinturón: si
   una plantilla o un generador lo vuelve a colar, no se verá.

   Consecuencia asumida: el sitio deja de ofrecer el atajo de
   teclado del criterio 2.4.1 de la norma de accesibilidad.
   Decisión del CEO, tomada con el aviso delante.
   ============================================================ */
.skip-link, .skip-link:focus { display: none !important; }

.container { max-width: 1240px; margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 900px) { .container { padding-inline: var(--s-5); } }