/* 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:#6E7480; /* 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); /* 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); --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: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; } html:root[data-brand="super"] { --accent:#B3241A; --accent-mark:#DE2A17; --btc:#A85B08; /* el precio de BTC sigue siendo naranja aunque la marca sea roja */ } html:root[data-brand="super"][data-theme="noche"] { --accent:#F0705F; --accent-mark:#DE2A17; } /* ═══ 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: — 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 */ }