/* ========================================================================== FinanceXLab — Design Tokens Variables del design system. Ningún valor de color/tipografía/espaciado debe escribirse hardcodeado fuera de este archivo. ========================================================================== */ :root { /* Fondos */ --bg-base: #020617; --bg-card: #0f1229; --bg-card-to: #131233; /* extremo del degradado sutil de .card — ver components.css */ --bg-elevated: #1e2140; --bg-overlay: #0a0a1899; /* Bordes */ --border-subtle: #33355a; --border-active: #8b5cf6; /* Texto */ --text-primary: #f1f5f9; --text-secondary: #9ca3c4; --text-muted: #4c5178; /* Acentos — identidad violeta/morado (SECCIÓN rediseño visual). El nombre "--accent-blue" se conserva a propósito: es el ÚNICO acento interactivo de toda la app (botones primarios, links, borde activo, barra de progreso, glow de hover) y cambiar solo su valor aquí reskinea toda la UI sin tocar los ~90 archivos que ya lo consumen. */ --accent-blue: #8b5cf6; --accent-green: #22c55e; --accent-red: #ef4444; --accent-amber: #f59e0b; --accent-violet: #a78bfa; --accent-violet-deep: #6d28d9; --accent-cyan: #06b6d4; /* Gradientes */ --gradient-hero: linear-gradient(135deg, #020617 0%, #150a30 45%, #2e1065 100%); --gradient-blue: linear-gradient(135deg, #6d28d9, #8b5cf6); --gradient-violet: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 55%, #6d28d9 100%); --gradient-green: linear-gradient(135deg, #15803d, #22c55e); --gradient-gold: linear-gradient(135deg, #b45309, #f59e0b); /* Espaciado / radios */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; /* Sombras */ --shadow-card: 0 4px 24px rgba(0,0,0,0.45); --shadow-modal: 0 20px 60px rgba(0,0,0,0.6); --shadow-glow: 0 0 22px rgba(139,92,246,0.35); /* Tipografía */ --font-display: 'Syne', sans-serif; /* Títulos grandes */ --font-body: 'DM Sans', sans-serif; /* Cuerpo y UI */ --font-mono: 'DM Mono', monospace; /* Números y datos */ } /* ---- Modo Daltónico (SECCIÓN 7.5) -------------------------------------- Activado por js/core/tema.js (clase en ). Redefine los ÚNICOS dos acentos semánticos "bueno/malo" — verde y rojo — por una paleta azul/amarillo/vermellón (Okabe–Ito), segura para protanopia y deuteranopia. Como el resto de la app ya usa var(--accent-green) / var(--accent-red) en vez de hex directo, este único bloque re-colorea toda la UI basada en HTML/CSS sin tocar cada archivo — solo lo que dibuja en (que no lee variables CSS) necesita llamar a window.FXL.tema.colorEstado() aparte; ver esos archivos. -------------------------------------------------------------------- */ :root.modo-daltonico { --accent-green: #0072B2; /* antes verde-éxito → azul */ --accent-red: #D55E00; /* antes rojo-peligro → vermellón */ --accent-amber: #F0E442; /* antes ámbar-advertencia → amarillo, más separado del vermellón */ --gradient-green: linear-gradient(135deg, #005580, #0072B2); }