/* Design tokens compartidos entre styles.css (sitio) y widget.css (chat). Única fuente de verdad de la paleta — cambiar un color se hace aquí, no en los dos archivos por separado. Paleta: Monocromo + Índigo Eléctrico. Modo oscuro es la base (:root). Modo claro se activa por preferencia del sistema (prefers-color-scheme) o, si el usuario lo eligió a mano con el interruptor del header, por el atributo [data-theme] en — ese atributo manda siempre, en cualquier dirección, sobre la preferencia del sistema. Cada valor de texto está verificado contra WCAG AA (≥4.5:1) sobre su fondo correspondiente. */ :root { --bg-dark: #0c0c0e; --bg-card: rgba(23, 23, 26, 0.6); --border-card: rgba(255, 255, 255, 0.08); --border-hover: rgba(91, 91, 246, 0.4); --primary: #5b5bf6; --primary-rgb: 91, 91, 246; /* mismo color que --primary, en tripleta para rgba(var(--primary-rgb), alpha) */ --primary-hover: #4747dd; --primary-glow: rgba(91, 91, 246, 0.35); --primary-tint: #a5a5fb; /* variante clara del acento, para texto legible sobre --bg-dark (8.7:1) */ --text-main: #f5f5f5; --text-muted: #8a8a90; --text-dim: #7a7a81; /* 4.59:1 sobre --bg-dark — cuidado si se aclara: por debajo de esto falla AA */ --error: #f87171; /* Niveles de superficie reutilizables: reemplazan los rgba(255,255,255,X) sueltos que había repetidos por todo el CSS — cambiar la intensidad del "overlay" en modo oscuro se hace aquí, una vez. */ --surface-1: rgba(255, 255, 255, 0.05); /* paneles sutiles: tarjetas, botón secundario, badges */ --surface-2: rgba(255, 255, 255, 0.1); /* paneles más marcados: hover, switches */ --input-bg: rgba(0, 0, 0, 0.3); /* campos de formulario "hundidos" */ --surface-panel: #131316; /* superficie sólida elevada (panel del widget) */ --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg-dark: #f7f7f9; --bg-card: rgba(255, 255, 255, 0.75); --border-card: rgba(0, 0, 0, 0.08); --primary-glow: rgba(91, 91, 246, 0.25); --primary-tint: #4338ca; /* 7.39:1 sobre el fondo claro */ --text-main: #18181b; --text-muted: #5c5c66; /* 6.18:1 */ --text-dim: #6e6e78; /* 4.71:1 */ --error: #b91c1c; /* 6.05:1 */ --surface-1: rgba(0, 0, 0, 0.035); --surface-2: rgba(0, 0, 0, 0.06); --input-bg: rgba(0, 0, 0, 0.035); --surface-panel: #ffffff; color-scheme: light; } } :root[data-theme="light"] { --bg-dark: #f7f7f9; --bg-card: rgba(255, 255, 255, 0.75); --border-card: rgba(0, 0, 0, 0.08); --primary-glow: rgba(91, 91, 246, 0.25); --primary-tint: #4338ca; --text-main: #18181b; --text-muted: #5c5c66; --text-dim: #6e6e78; --error: #b91c1c; --surface-1: rgba(0, 0, 0, 0.035); --surface-2: rgba(0, 0, 0, 0.06); --input-bg: rgba(0, 0, 0, 0.035); --surface-panel: #ffffff; color-scheme: light; }