/* ══════════════════════════════════════════════════════════════════ BunnyStat — shared_tokens.css Fuente única de verdad para los tokens de color (dark + 3 light modes). Extraído de frontend/borradores/color_prototype.html — integración "sistema cromático v1". Uso: cada HTML de producto importa este archivo y aplica el tema activo con el atributo data-theme en (lo gestiona theme_toggle.js, no hay que tocarlo a mano por página). Colores de UI (purple, teal, amber, red y sus variantes -light) son INMUTABLES entre temas — nunca cambian con data-theme. Solo cambian los tokens de superficie (bg-*, text-*, border, nav-bg, shadow) y --metric-purple (ver Paso 3 del ticket de integración). ══════════════════════════════════════════════════════════════════ */ :root { /* UI colors — inmutables en todos los temas */ --purple: #1A2B47; /* Azul Prusia Corporativo Oscuro */ --purple-light: #0C1420; --purple-mid: #2A4575; --teal: #00B8D4; /* Cian Eléctrico Profundo */ --teal-light: rgba(0, 242, 255, 0.12); /* Brillo cian */ --teal-mid: #00F2FF; /* Cian Neón Puro (Acento Principal) */ --amber: #FFD600; /* Amarillo Canario Eléctrico (Contraste frío) */ --amber-light: rgba(255, 214, 0, 0.12); --red: #FF1744; /* Rojo Eléctrico (para errores graves) */ --red-light: rgba(255, 23, 68, 0.15); --accent-glow: #00F2FF; /* El cian eléctrico es el protagonista */ /* Radios — genuinamente compartidos, no varían por tema */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; } /* Bug reportado: en modo oscuro, el texto de los , checkboxes nativos, scrollbars) — con esto, el popup se renderiza oscuro en dark mode (contraste correcto con el texto claro) y claro en los 3 light modes. */ [data-theme="dark"] { color-scheme: dark; } [data-theme="light-A"], [data-theme="light-B"], [data-theme="light-C"] { color-scheme: light; } /* ── DARK MODE (estado histórico del home/hero — default) ── */ [data-theme="dark"] { --bg-hero: #020408; --bg-page: #020408; --bg-card: #080C14; --bg-card-alt: #0E1420; --bg-input: #121A2A; --border: rgba(0, 242, 255, 0.10); /* Borde cian sutil */ --text-primary: #E0F7FA; /* Blanco azulado frío */ --text-secondary: rgba(224, 247, 250, 0.65); --text-hint: rgba(224, 247, 250, 0.38); --nav-bg: rgba(2, 4, 8, 0.90); --shadow: 0 4px 24px rgba(0,0,0,0.75); /* Paso 3 — metric cards: ratio ~16:1 sobre fondo oscuro */ --metric-purple: #E8E4FC; } /* ── LIGHT MODE A — Tech Ice Blue ── */ [data-theme="light-A"] { --bg-hero: #020408; /* home se mantiene oscuro siempre, ver Paso 4/Restricciones */ --bg-page: #E1F5FE; /* Fondo azul hielo muy pálido */ --bg-card: #FFFFFF; --bg-card-alt: #B3E5FC; /* Azul cielo suave */ --bg-input: #FFFFFF; --border: rgba(0, 184, 212, 0.15); --text-primary: #012A36; /* Azul oscuro cianótico */ --text-secondary: #01579B; --text-hint: #4FC3F7; --nav-bg: rgba(2, 4, 8, 0.92); --shadow: 0 1px 3px rgba(26,43,71,.07), 0 4px 16px rgba(26,43,71,.06); --metric-purple: #01579B; /* = --purple, contraste correcto sobre fondo claro */ } /* ── LIGHT MODE B — Desaturated blue-gray ("sala de laboratorio") ── */ [data-theme="light-B"] { /* Steel & Cobalt Gray */ --bg-hero: #020408; --bg-page: #ECEFF1; /* Gris acero azulado pálido */ --bg-card: #F9FAFB; --bg-card-alt: #CFD8DC; /* Gris metalizado */ --bg-input: #F9FAFB; --border: rgba(55, 71, 79, 0.15); --text-primary: #102027; /* Casi negro azulado */ --text-secondary: #37474F; --text-hint: #78909C; --nav-bg: rgba(2,4,8,0.92); --shadow: 0 2px 12px rgba(0,0,0,0.06); --metric-purple: #01579B; /* = --purple, contraste correcto sobre fondo claro */ } /* ── LIGHT MODE C — Warm purple tint (default claro, máxima coherencia de marca) ── */ [data-theme="light-C"] { /* Cold Ocean Mist */ --bg-hero: #020408; --bg-page: #E0F2F1; /* Verde azulado muy pálido, brumoso */ --bg-card: #F1F8F9; --bg-card-alt: #B2DFDB; --bg-input: #F1F8F9; --border: rgba(0, 105, 92, 0.15); --text-primary: #00241B; /* Verde oscuro cianótico */ --text-secondary: #004D40; --text-hint: #4DB6AC; --nav-bg: rgba(2, 4, 8, 0.92); --shadow: 0 2px 14px rgba(0,105,92,0.07); --metric-purple: #01579B; /* = --purple, contraste correcto sobre fondo claro */ } /* Transición suave al cambiar de tema — opt-in por selector, no global, para no interferir con transiciones locales ya definidas por cada pantalla (ej. hover states con su propio timing). */ body { transition: background .35s ease, color .25s ease; }