/* ============================================================================
   fentho/marca/tokens.css — Fentho Visual Foundation V1 · Señal
   ============================================================================
   Capa única de tokens semánticos, fuente de verdad para todo public/fentho/.
   Decisión aprobada por el fundador (27-09-2026), documentada en
   docs/identidad-visual/01-TOKENS.md — no se inventa ningún valor aquí que no
   esté ya en ese documento.

   Cómo se usa: se enlaza ANTES que fentho/ui.css (o antes de cualquier <style>
   de página) en el <head>. Los ficheros que la consumen no declaran sus
   propios colores: redefinen sus variables antiguas como alias de las de
   aquí (`--papel: var(--c-fondo)`, etc.), así que ningún selector de
   componente tuvo que tocarse — ver el mapa completo en
   docs/identidad-visual/… y en el mensaje del commit de este paquete.

   Claro y oscuro sin destello: el oscuro se activa por preferencia real del
   sistema (`prefers-color-scheme`), que el navegador resuelve ANTES del
   primer pintado — no hace falta JavaScript ni localStorage, así que no hay
   ventana en la que se vea el tema equivocado. `[data-tema="oscuro"]` y
   `[data-tema="claro"]` quedan disponibles para cuando Ajustes tenga un
   selector manual (fuera de esta fase); mientras tanto no los fija nadie,
   salvo `editar.html`, que ya fuerza claro a propósito y se conserva así.
   ============================================================================ */

@font-face {
  font-family: "Lexend";
  src: url("/fentho/marca/fuentes/lexend-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fentho/marca/fuentes/jetbrains-mono-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* ---------- Neutros (claro) ---------- */
  --c-fondo: #F3F3F0;
  --c-superficie: #FFFFFF;
  --c-superficie-2: #EBEBE6;
  --c-superficie-3: #DEDED8;
  --c-borde: #D9D9D3;
  --c-borde-fuerte: #0B0B0C;
  --c-borde-control: #6B6B70;
  --c-texto: #0B0B0C;
  --c-texto-2: #2F2F33;
  --c-texto-3: #55555C;
  --c-invertido: #0B0B0C;
  --c-invertido-texto: #F3F3F0;
  --c-invertido-texto-2: #C9C9C4;

  /* ---------- Señal coral (igual en claro y oscuro) ---------- */
  --c-accion: #F2552C;
  --c-accion-hover: #FF6A40;
  --c-accion-press: #E4461D;
  --c-accion-texto: #0B0B0C;   /* siempre negro encima del coral */
  --c-acento-texto: #B63A14;   /* enlace o palabra de acento, sobre claro */
  --c-acento-suave: #FFE2D8;
  --c-seleccion: #FFD8CA;
  --c-foco: #D8431C;

  /* ---------- Semánticos, independientes del coral ---------- */
  --c-ok: #13773F;       --c-ok-suave: #E0F3E7;
  --c-aviso: #735500;    --c-aviso-suave: #FBF1D6;
  --c-error: #A3143C;    --c-error-suave: #FCE4EA;
  --c-info: #3B4A5C;     --c-info-suave: #E8ECF1;

  /* ---------- Fenthium: azul eléctrico, nunca coral ni violeta ---------- */
  --o-fenthium: #1650E6;
  --o-fenthium-hover: #123EBA;
  --o-fenthium-suave: #E6EEFF;
  --o-fenthium-suave-2: #EEF3FF;
  --o-fenthium-borde: #C7D6FB;
  --o-fenthium-borde-2: #D9E4FC;
  --o-fenthium-texto: #1650E6;
  --o-fenthium-glow: 0 0 24px rgba(22, 80, 230, .16);

  /* ---------- Tipografía ---------- */
  --f-display: "Lexend", system-ui, sans-serif;
  --f-ui: "Lexend", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --peso-titular: 680;
  --tracking-titular: -0.028em;
  --peso-ui: 380;
  --peso-fuerte: 580;

  /* ---------- Forma (docs/identidad-visual/01-TOKENS §7) ----------
     --r-control: radio de controles de herramienta (Code Work, docs/41). */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 24px;
  --r-control: 10px;

  /* ---------- Foco de marca ---------- */
  --anillo-foco: 0 0 0 3px var(--c-foco);
}

/* Oscuro por preferencia real del sistema — se resuelve antes del primer
   pintado, cero JavaScript, cero destello. `[data-tema="claro"]` lo pone
   SOLO el resolvedor (fentho/marca/tema.js y su snippet de arranque)
   cuando la preferencia guardada es claro; ninguna página lo escribe. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --c-fondo: #0B0B0C;
    --c-superficie: #161618;
    --c-superficie-2: #202023;
    --c-superficie-3: #2B2B2F;
    --c-borde: #2E2E33;
    --c-borde-fuerte: #F3F3F0;
    --c-borde-control: #8A8A90;
    --c-texto: #F3F3F0;
    --c-texto-2: #C9C9C4;
    --c-texto-3: #A0A09A;
    --c-invertido: #F3F3F0;
    --c-invertido-texto: #0B0B0C;
    --c-invertido-texto-2: #2F2F33;

    --c-acento-texto: #FF7A52;
    --c-acento-suave: #3A1A10;
    --c-seleccion: #5A2412;
    --c-foco: #F2552C;

    --c-ok: #5DD68D;      --c-ok-suave: #0F2618;
    --c-aviso: #F2C14E;   --c-aviso-suave: #2E2408;
    --c-error: #FF7A98;   --c-error-suave: #33121C;
    --c-info: #A9B8CC;    --c-info-suave: #1A1F26;

    --o-fenthium: #7AA2FF;
    --o-fenthium-hover: #96B6FF;
    --o-fenthium-suave: #0E1A3A;
    --o-fenthium-suave-2: #101E42;
    --o-fenthium-borde: #2B3E73;
    --o-fenthium-borde-2: #24345F;
    --o-fenthium-texto: #7AA2FF;
    --o-fenthium-glow: 0 0 24px rgba(122, 162, 255, .18);
  }
}

/* Override explícito, para cuando Ajustes tenga un selector manual. Nadie lo
   fija todavía salvo el caso ya existente de editar.html con "claro". */
:root[data-tema="oscuro"] {
  --c-fondo: #0B0B0C;
  --c-superficie: #161618;
  --c-superficie-2: #202023;
  --c-superficie-3: #2B2B2F;
  --c-borde: #2E2E33;
  --c-borde-fuerte: #F3F3F0;
  --c-borde-control: #8A8A90;
  --c-texto: #F3F3F0;
  --c-texto-2: #C9C9C4;
  --c-texto-3: #A0A09A;
  --c-invertido: #F3F3F0;
  --c-invertido-texto: #0B0B0C;
  --c-invertido-texto-2: #2F2F33;

  --c-acento-texto: #FF7A52;
  --c-acento-suave: #3A1A10;
  --c-seleccion: #5A2412;
  --c-foco: #F2552C;

  --c-ok: #5DD68D;      --c-ok-suave: #0F2618;
  --c-aviso: #F2C14E;   --c-aviso-suave: #2E2408;
  --c-error: #FF7A98;   --c-error-suave: #33121C;
  --c-info: #A9B8CC;    --c-info-suave: #1A1F26;

  --o-fenthium: #7AA2FF;
  --o-fenthium-hover: #96B6FF;
  --o-fenthium-suave: #0E1A3A;
  --o-fenthium-suave-2: #101E42;
  --o-fenthium-borde: #2B3E73;
  --o-fenthium-borde-2: #24345F;
  --o-fenthium-texto: #7AA2FF;
  --o-fenthium-glow: 0 0 24px rgba(122, 162, 255, .18);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}