/* tokens.css — capa de tokens del sistema. Cárgalo DESPUÉS de styles.css.
   ---------------------------------------------------------------------------
   Tres capas, en orden:
     1. PRIMITIVAS  escalas sin semántica (espaciado, tipo, radio)
     2. ROLES       qué significa cada color (--ok, --warn, --bad, --accent)
     3. MARCA       lo único que cambia entre Semáforo BTC y Portal Súper

   Dirección: "Suizo" — papel, aire y proporción. Sin cajas. La jerarquía la
   carga la tipografía, no el borde de una card. Ver docs/DESIGN.md.

   Reemplaza a theme-onix.css. Los temas viejos ("onix", "dark") se remapean a
   "noche" para que el localStorage existente de la gente siga funcionando.

   ESPECIFICIDAD: styles.css define la paleta en `:root` (0,1,0) y el tema claro
   en `html[data-theme="light"]` (0,1,1). Acá se usa `html:root` (0,1,1) y
   `html:root[data-theme=…]` (0,2,1) para ganar por orden y por peso — si bajás
   la especificidad de estos selectores, vuelve la paleta vieja. */

/* ═══ 1. PRIMITIVAS ════════════════════════════════════════════════════════ */
html:root {
  /* Espaciado — escala de 4px. Ningún valor fuera de acá. */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-6:24px;  --sp-8:32px;  --sp-12:48px; --sp-16:64px; --sp-24:96px;

  /* Tipografía — razón 1.25, más dos grados de despliegue para el veredicto */
  --fs-xs:11px;   --fs-sm:13px;   --fs-base:15px; --fs-md:18px;
  --fs-lg:23px;   --fs-xl:29px;   --fs-2xl:40px;  --fs-3xl:64px; --fs-4xl:84px;

  /* Familias. Helvetica es la tradición suiza y está en todas partes: no hay
     webfont que cargar, así que tampoco hay fallback silencioso posible. */
  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --r-sm:4px; --r-md:8px; --r-lg:12px;

  /* Ancho de lectura cómodo para texto corrido */
  --measure:66ch;
}

/* ═══ 2. ROLES — tema claro (por defecto) ══════════════════════════════════ */
html:root,
html:root[data-theme="claro"],
html:root[data-theme="light"] {
  /* Neutros con sesgo frío mínimo: papel bajo luz de día, no gris de sistema */
  --bg:#FBFBFA;
  --card:#FBFBFA;          /* igual al fondo: las cards ya no son superficies */
  --surface:#F2F2F0;       /* único gris real, para inputs y hovers */
  --border:#E2E4E6;
  --rule:#14161A;          /* filete fuerte: encabezado de sección */
  --text:#14161A;
  --muted:#646A75; /* 4,85:1 sobre #F2F2F0. #6E7480 daba 4,19 y no pasa AA */

  /* Semánticos — SOLO estado. Nunca decoración, nunca marca. */
  --ok:#1A7F37;    --green:#1A7F37;  --green-soft:rgba(26,127,55,.10);
  --warn:#9A6700;  --yellow:#9A6700;
  --bad:#CF222E;   --red:#CF222E;    --red-soft:rgba(207,34,46,.08);

  /* Acento como TEXTO y tinta SOBRE el acento (R19 — REVISION-Extio #1/#2):
     el ámbar de marca da 2,09:1 como texto en claro y #fff sobre ámbar 2,16:1.
     --accent-text es el mismo rol en versión legible; --accent-ink es la tinta
     que va encima de un fondo acento (calcada de tools/extio/app.html, 8,4:1). */
  /* 16-ago-2026: de #9A6700 a #8F5F00. El valor viejo daba 4,70:1 sobre la
     tarjeta —pasa por poco— pero 4,28:1 sobre el fondo teñido del ítem activo
     de la sidebar, que es donde más se usa: BAJO el mínimo. Medido en
     producción, no estimado. El nuevo deja 5,33 y 4,85 — con holgura, y el
     tono es indistinguible a ojo. */
  --accent-text:#8F5F00;
  --accent-ink:#14161A;

  /* De apoyo, solo para series de gráficos */
  --purple:#8250df; --amber:#B07219; --teal:#1b7c83; --pink:#bf3989;
  --grid-line:#EAECEE;
  --tooltip-bg:#FFFFFF;
  --traffic-bg:#2D333B;    /* el semáforo mantiene cuerpo oscuro: las luces brillan */
  --light-off:#444C56;
}

/* ═══ 2b. ROLES — tema noche ═══════════════════════════════════════════════ */
/* No es el claro invertido. Fondo con el mismo sesgo frío, tinta que nunca
   llega al blanco puro (deslumbra sobre negro) y semánticos re-elegidos para
   mantener contraste AA sobre fondo oscuro. */
html:root[data-theme="noche"],
html:root[data-theme="dark"],
html:root[data-theme="onix"] {
  --bg:#0E1013;
  --card:#0E1013;
  --surface:#181B20;
  --border:#262A30;
  --rule:#E6E8EA;
  --text:#E6E8EA;
  --muted:#8D939C;

  --ok:#3FB950;    --green:#3FB950;  --green-soft:rgba(63,185,80,.13);
  --warn:#D29922;  --yellow:#D29922;
  --bad:#F85149;   --red:#F85149;    --red-soft:rgba(248,81,73,.11);

  /* En noche el ámbar sí es legible como texto; la tinta sobre acento sigue oscura */
  --accent-text:#D29922;
  --accent-ink:#14161A;

  --purple:#a371f7; --amber:#E3A74F; --teal:#39c5cf; --pink:#db61a2;
  --grid-line:#1E2228;
  --tooltip-bg:#181B20;
  --traffic-bg:#2D333B;
  --light-off:#444C56;
}

/* ═══ 3. MARCA ═════════════════════════════════════════════════════════════ */
/* Lo único que separa a los dos productos. Para diferenciar el Portal Súper
   más adelante alcanza con poner data-brand="super" en <html>. */
html:root,
html:root[data-brand="btc"] {
  --accent:#A85B08;        /* naranja Bitcoin profundizado: legible sobre papel */
  --accent-mark:#F7931A;   /* el naranja pleno, solo para rellenos y marcas */
  --btc:#A85B08;
}
html:root[data-theme="noche"],
html:root[data-theme="dark"],
html:root[data-theme="onix"],
html:root[data-brand="btc"][data-theme="noche"] {
  --accent:#E8A33D;
  --accent-mark:#F7931A;
  --btc:#E8A33D;
}
/* Marca "super" = identidad Extio — corregido 27-jul-2026 (tarde): la
   referencia real no es la matriz de login, es la paleta YA implementada en
   tools/extio/app.html (el workspace), que Camilo señaló con captura de
   pantalla. Valores calcados 1:1 de su :root[data-theme="dark"/"light"] (no
   inventados). En claro solo cambia --accent (el resto del papel Suizo queda
   "antiguo", sin tocar, por pedido explícito); en noche se replica también
   fondo/superficie/borde exactos del workspace. */
html:root[data-brand="super"] {
  --accent:#EBA210;        /* --amber-mark del workspace en claro */
  --accent-mark:#EBA210;
  /* Relleno del botón primario. No sigue a --accent: en noche ese token
     aclara a #F2B63D y el blanco encima no pasa AA. #14161A sobre #EBA210
     da 8,37:1 en claro y en noche. */
  --accent-fill:#EBA210;
  --btc:#A85B08;           /* el precio de BTC sigue siendo naranja aunque la marca sea Extio */
}
html:root[data-brand="super"][data-theme="noche"] {
  /* Calcado de tools/extio/app.html :root[data-theme="dark"] — --ground,
     --panel, --panel-2, --line, --amber-mark exactos. Solo bajo
     data-theme="noche": en claro, /tools/ se queda en el papel Suizo de
     siempre con el acento ámbar arriba, sin forzar fondo oscuro a quien no
     lo eligió. */
  --bg:#111C27;
  --card:#18242F;
  --surface:#1E2C38;
  --border:#283846;
  --accent:#F2B63D;
  --accent-mark:#F2B63D;
  --accent-fill:#EBA210;   /* el botón primario no aclara de noche */
  --accent-text:#F2B63D;   /* sobre navy oscuro el ámbar de marca rinde ~7:1 */
}
/* La demo de ventas es data-brand="extio", no "super". Sin este token
   var(--accent-fill) no resuelve y el botón primario queda transparente
   con tinta #14161A. El relleno es el ámbar de Extio (#F2B63D), no el de
   Súper (#EBA210), en claro y en noche. #14161A sobre #F2B63D da 9,95:1. */
html:root[data-brand="extio"],
html:root[data-brand="extio"][data-theme="noche"] {
  --accent-fill:#F2B63D;
}

/* ═══ 4. DENSIDAD ══════════════════════════════════════════════════════════ */
/* El sitio público se lee una vez por semana y agradece el aire. Las tools de
   Súper se usan a diario y escaneando: ahí la densidad ES la función, y el
   mismo espaciado se siente lento.
   Como el espaciado quedó tokenizado, comprimirlo no toca ni un componente:
   se reescala la escala y todo el sistema acompaña.
   Uso: <html data-density="compact"> — puesto por super-shell.js en /tools/*. */
html:root[data-density="compact"] {
  --sp-1:3px;   --sp-2:5px;   --sp-3:8px;   --sp-4:10px;
  --sp-6:14px;  --sp-8:18px;  --sp-12:26px; --sp-16:34px; --sp-24:48px;
  --fs-3xl:44px; --fs-4xl:56px;   /* los grados de despliegue también bajan */
}