/* NH — theme-vars.css * Override tema (light/dark) globale per TUTTE le pagine, anche quelle che * dichiarano solo valori dark in :root senza override light. * * Strategia: * 1) Ridefinire tutte le CSS custom properties principali in due blocchi * (light / dark) con specificità html[data-theme="x"] > :root. * 2) Forzare body + input/select/textarea/button a usare le custom properties * con !important, così il tema funziona anche se la pagina ha style * inline diretti (background:#0f172a etc.). * 3) color-scheme coerente per la UI nativa (scrollbar, form controls). * * Include come ULTIMA risorsa CSS nel : * * ========================================================================== */ /* ────────────────────── PALETTE LIGHT ──────────────────────────────────── */ html[data-theme="light"] { color-scheme: light; /* Sfondi */ --bg: #f3f5f8; --bg-2: #ffffff; --bg-3: #eef2f6; --bg-4: #e5e9f0; /* Testo */ --text: #0f172a; --text-1: #0f172a; --text-2: #475569; --text-3: #64748b; --text-4: #94a3b8; --text-dim: #6b7280; /* Bordi / ombre */ --border: #d9dee4; --border-hi: #94a3b8; --shadow: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); /* Superfici */ --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f6; /* Accenti */ --accent: #2563eb; --blue: #2563eb; --blue-2: #4f46e5; --blue-dim: rgba(37, 99, 235, 0.10); --violet: #7c3aed; --purple: #7c3aed; --pink: #db2777; --cyan: #0891b2; --teal: #0d9488; --green: #059669; --amber: #d97706; --red: #dc2626; /* Stati */ --success: #059669; --warn: #d97706; --warning: #d97706; --danger: #dc2626; --error: #dc2626; --info: #0891b2; --glow: rgba(37, 99, 235, 0.18); --hero-bg: linear-gradient(135deg, #e0e7ff 0%, #f3f5f8 60%, #dbeafe 100%); /* Testo sopra l'hero: in light il bg è chiaro → scritte scure */ --hero-text: #0f172a; --hero-text-muted: #334155; --hero-text-dim: #475569; --hero-border: rgba(15,23,42,.12); --hero-surface: rgba(255,255,255,.55); } /* ────────────────────── PALETTE DARK ───────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; --bg: #0f172a; --bg-2: #1e293b; --bg-3: #334155; --bg-4: #475569; --text: #f1f5f9; --text-1: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8; --text-4: #64748b; --text-dim: #94a3b8; --border: #334155; --border-hi: #64748b; --shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.4), 0 8px 20px -8px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 30px 70px -12px rgba(0, 0, 0, 0.6); --surface: #1e293b; --surface-2: #0f172a; --surface-3: #334155; --accent: #3b82f6; --blue: #60a5fa; --blue-2: #818cf8; --blue-dim: rgba(96, 165, 250, 0.15); --violet: #a78bfa; --purple: #8b5cf6; --pink: #f472b6; --cyan: #22d3ee; --teal: #2dd4bf; --green: #34d399; --amber: #fbbf24; --red: #f87171; --success: #10b981; --warn: #f59e0b; --warning: #f59e0b; --danger: #ef4444; --error: #ef4444; --info: #06b6d4; --glow: rgba(96, 165, 250, 0.25); --hero-bg: linear-gradient(135deg, #1e1b4b 0%, #0b1220 60%, #172554 100%); /* Testo sopra l'hero: in dark il bg è scuro → scritte chiare */ --hero-text: #f1f5f9; --hero-text-muted: #cbd5e1; --hero-text-dim: #94a3b8; --hero-border: rgba(255,255,255,.08); --hero-surface: rgba(255,255,255,.04); } /* ────────────────────── FORZATURE GLOBALI ──────────────────────────────── */ /* Assicurano il tema anche su pagine con colori hardcoded. !important è necessario perché alcune pagine (soc/ioc/grc/ops) dichiarano `body { background: #0f172a }` direttamente senza custom property. */ html[data-theme="light"] body, html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text-1) !important; transition: background-color .15s ease, color .15s ease; } /* Form controls — devono adattarsi al tema anche quando la pagina non li tematizza. */ html[data-theme="light"] input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] select, html[data-theme="light"] textarea { background-color: var(--surface); color: var(--text-1); border-color: var(--border); } html[data-theme="dark"] input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--surface-2); color: var(--text-1); border-color: var(--border); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--text-3); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-4); } /* Scrollbar chrome-style coerente */ html[data-theme="dark"] *::-webkit-scrollbar-track { background: #0f172a; } html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } html[data-theme="light"] *::-webkit-scrollbar-track { background: #f1f5f9; } html[data-theme="light"] *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }