/* ================================================================ T³ — css/tema.css Los tokens de interfaz del panel y de los generadores, en los dos temas. Es el único lugar donde se escriben colores: admin.css, el generador de carruseles y el de reels los leen de acá. Los valores son los de negocio/marca/marca.json → color.interfaz (manual §4, D-74, D-123). Qué NO es: no toca las piezas. Lo que dibuja el canvas de un carrusel o de un reel es oscuro siempre (fundamentos §5: la marca es oscura en pantalla y clara en papel) y tiene sus constantes en el JS de cada generador. Esto es solo lo que rodea al canvas. Tema: `data-theme` en , lo pone js/tema.js (o admin.js). Sin atributo, oscuro. Para destilar: cambiar los valores acá y en marca.json. ================================================================ */ :root { --bg-base: #0a0a0f; --bg-sec: #111118; --bg-card: #16161f; --bg-elev: #1a1a25; --bg-hover: #1c1c28; --border: #252535; --border-strong: #3a3a4a; --border-hover: rgba(56, 189, 248, 0.35); --text: #eaeaef; --text-strong: #ffffff; --text-sec: #9090a8; --text-muted: #606078; --cian: #38bdf8; --cian-hover: #60caf9; --cian-text: #0a0f14; --cian-glow: rgba(56, 189, 248, 0.15); --cian-glow-suave:rgba(56, 189, 248, 0.07); --violeta: #6c5ce7; --gradiente: linear-gradient(135deg, var(--cian), var(--violeta)); --ok: #00e88f; --warn: #fbbf24; --warn-fondo: rgba(251, 191, 36, 0.08); --danger: #e05252; --overlay: rgba(0, 0, 0, 0.7); --sombra: 0 4px 24px rgba(0, 0, 0, 0.3); --login-glow: radial-gradient(ellipse 140% 55% at 50% 0%, rgba(56, 189, 248, 0.10) 0%, var(--bg-base) 70%); --font-main: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; color-scheme: dark; } :root[data-theme="light"] { --bg-base: #ffffff; --bg-sec: #eef1f6; --bg-card: #ffffff; --bg-elev: #f4f5f7; --bg-hover: #eef1f6; --border: #e2e4ea; --border-strong: #c9ccd6; --border-hover: rgba(0, 140, 200, 0.4); --text: #1a1a2e; --text-strong: #0d0d1a; --text-sec: #5a5a7a; --text-muted: #8888a0; --cian: #0284c7; --cian-hover: #026a9f; --cian-text: #ffffff; --cian-glow: rgba(2, 132, 199, 0.10); --cian-glow-suave:rgba(2, 132, 199, 0.05); --ok: #00b36b; --warn: #b7791f; --warn-fondo: rgba(183, 121, 31, 0.10); --overlay: rgba(20, 30, 60, 0.45); --sombra: 0 1px 3px rgba(20, 30, 60, 0.06), 0 4px 12px rgba(20, 30, 60, 0.08); --login-glow: radial-gradient(ellipse 140% 55% at 50% 0%, rgba(2, 132, 199, 0.06) 0%, var(--bg-base) 70%); color-scheme: light; }