/* ========================================================================== TOKENS DE DISEÑO — Soluflex ERP Refactor 2026-08-07 + auditoría visual. - Define UNA sola fuente de verdad para colores, espacios, radios y sombras. - Soporta dos temas: light (default) y dark (atributo data-theme="dark" en ). - Todos los demás CSS consumen estas variables; no deberían tener valores hardcoded. ========================================================================== */ :root { /* ---------- Paleta light (default) ---------- Contraste reforzado 2026-08-07: texto principal más oscuro, muted más legible, border más marcado. WCAG AA en body text. */ --bg: #eef2f7; --bg-elev: #ffffff; --panel: #ffffff; --panel-2: #f1f5f9; --header: #0f172a; --text: #0f172a; --text-strong: #020617; --text-muted: #475569; --text-on-header: #ffffff; --text-on-header-muted: #cbd5e1; --border: #d1d9e2; --border-strong: #94a3b8; /* Acentos (paleta corporativa más amable que el antiguo "azul plano") */ --accent-blue: #2563eb; --accent-blue-hover: #1d4ed8; --accent-blue-soft: #eff6ff; --accent-green: #16a34a; --accent-green-hover: #15803d; --accent-green-soft: #ecfdf5; --accent-danger: #dc2626; --accent-danger-hover: #b91c1c; --accent-danger-soft: #fef2f2; --accent-cyan: #0891b2; --accent-yellow: #ca8a04; --accent-yellow-hover: #a16207; --accent-purple: #7c3aed; /* ---------- Sombras ---------- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow-md: 0 4px 12px rgba(15, 23, 42, .08); --shadow-lg: 0 12px 28px rgba(15, 23, 42, .12); --shadow-xl: 0 24px 48px rgba(15, 23, 42, .18); /* ---------- Radios ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* ---------- Espaciados (escala 4 px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; /* ---------- Tipografía ---------- */ --font-base: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --lh-tight: 1.2; --lh-base: 1.5; /* ---------- Layout ---------- */ --header-height: 56px; --container-max: 1440px; --transition: 180ms ease; /* ---------- Z-index ---------- */ --z-header: 2000; --z-dropdown: 1999; --z-modal: 9999; color-scheme: light; } /* ---------- Tema oscuro ---------- Réplica de la paleta actual que ya maneja el usuario, con tonos afinados para mejor contraste (cumple WCAG AA en texto principal). */ :root[data-theme="dark"] { --bg: #1a1d20; --bg-elev: #1e2226; --panel: #23282d; --panel-2: #2a3036; --header: #141618; --text: #f5f7fa; --text-strong: #ffffff; --text-muted: #8e959b; --text-on-header: #ffffff; --text-on-header-muted: #cbd5e1; --border: #3f464d; --border-strong: #4a5158; --accent-blue: #3498db; --accent-blue-hover: #5dade2; --accent-blue-soft: rgba(52, 152, 219, .15); --accent-green: #27ae60; --accent-green-hover: #2ecc71; --accent-green-soft: rgba(39, 174, 96, .15); --accent-danger: #e74c3c; --accent-danger-hover: #ef4444; --accent-danger-soft: rgba(231, 76, 60, .15); --accent-cyan: #22d3ee; --accent-yellow: #f1c40f; --accent-yellow-hover: #f39c12; --accent-purple: #a855f7; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 28px rgba(0, 0, 0, .55); --shadow-xl: 0 24px 48px rgba(0, 0, 0, .65); color-scheme: dark; }