/* * ============================================================= * E-FISCAL SALES SITE — Variables y Tokens de Diseño * Base: assets/css/base/variables.css * Referencia: .clinerules › css-structure-enforcement * ============================================================= */ /* ─── TOKENS BASE (Modo Claro) ───────────────────────────── */ :root { /* Paleta principal */ --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-indigo: #4f46e5; --color-indigo-dark: #4338ca; --color-accent: #06b6d4; /* Cyan vibrante */ --accent-rgb: 6, 182, 212; --color-accent-dark: #0891b2; /* Superficies — Modo Claro */ --color-bg: #ffffff; --color-bg-subtle: #f1f5f9; --color-bg-dark: #0f172a; --color-bg-dark-alt: #1e293b; /* Texto — Modo Claro */ --color-text-heading: #0f172a; --color-text-body: #334155; --color-text-muted: #64748b; --color-text-on-dark: rgba(255, 255, 255, 0.90); --color-text-on-dark-muted: rgba(255, 255, 255, 0.55); /* Bordes */ --color-border: #e2e8f0; --color-border-focus: rgba(37, 99, 235, 0.35); /* Efectos — Modo Claro */ --glass-bg: rgba(255, 255, 255, 0.70); --glass-border: rgba(255, 255, 255, 0.40); --glass-blur: blur(12px); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); /* Sombras */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.15); --shadow-cta: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -4px rgba(37, 99, 235, 0.3); /* Radios */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 100px; /* Espaciados */ --space-xs: .5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Botón de tema */ --tema-btn-bg: rgba(15, 23, 42, 0.07); --tema-btn-icon: "🌙"; } /* ───────────────────────────────────────────────────────────── MODO OSCURO — Detección automática por preferencia del SO Se activa cuando el usuario tiene dark mode configurado en Windows / macOS / Android / iOS ───────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --color-bg: #0f172a; --color-bg-subtle: #1e293b; --color-bg-dark: #020617; --color-bg-dark-alt: #0f172a; --color-text-heading: #f1f5f9; --color-text-body: #cbd5e1; --color-text-muted: #94a3b8; --color-border: #334155; --color-border-focus: rgba(99, 102, 241, 0.50); --glass-bg: rgba(15, 23, 42, 0.90); --glass-border: rgba(51, 65, 85, 0.90); --shadow-md: 0 4px 20px rgba(0,0,0,.40); --shadow-lg: 0 20px 40px rgba(0,0,0,.45); --tema-btn-bg: rgba(241, 245, 249, 0.10); --tema-btn-icon: "☀️"; } } /* ───────────────────────────────────────────────────────────── OVERRIDE MANUAL — data-tema="oscuro" en Tiene prioridad sobre la media query del sistema ───────────────────────────────────────────────────────────── */ [data-tema="oscuro"] { --color-bg: #0f172a; --color-bg-subtle: #1e293b; --color-bg-dark: #020617; --color-bg-dark-alt: #0f172a; --color-text-heading: #f1f5f9; --color-text-body: #cbd5e1; --color-text-muted: #94a3b8; --color-border: #334155; --color-border-focus: rgba(99, 102, 241, 0.50); --glass-bg: rgba(15, 23, 42, 0.90); --glass-border: rgba(51, 65, 85, 0.90); --shadow-md: 0 4px 20px rgba(0,0,0,.40); --shadow-lg: 0 20px 40px rgba(0,0,0,.45); --tema-btn-bg: rgba(241, 245, 249, 0.10); --tema-btn-icon: "☀️"; } /* Override manual — Modo Claro forzado */ [data-tema="claro"] { --color-bg: #ffffff; --color-bg-subtle: #f1f5f9; --color-text-heading: #0f172a; --color-text-body: #334155; --color-text-muted: #64748b; --color-border: #e2e8f0; --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(226, 232, 240, 0.80); --tema-btn-bg: rgba(15, 23, 42, 0.07); --tema-btn-icon: "🌙"; }