/* =========================================================================== * Dark theme refactor V1 — Semantic tokens (palette slate soft) * * Tre layer: * 1. Token primitivi (slate scale + accent colors) * 2. Semantic vars (intent: bg/text/border/shadow/success/warning/...) * 3. Switch via [data-theme="dark"] sull' * * Light = palette default su :root. Dark = override su [data-theme="dark"]. * Switch impostato pre-paint da JS in base/login/mfa (no FOUC). * * Brand colors (--brand-primary, --brand-pag-*) restano controllati da * BrandController injection inline — indipendenti dal tema. * ========================================================================= */ :root { /* ===== Slate scale (Tailwind slate) ===== */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* ===== Semantic — Background ===== */ --color-bg-base: var(--slate-50); /* body */ --color-bg-surface: #ffffff; /* card, panel */ --color-bg-elevated: #ffffff; /* modal, popover, dropdown */ --color-bg-muted: var(--slate-100); /* sidebar, hover state */ --color-bg-subtle: var(--slate-200); /* divider, deep section */ /* ===== Semantic — Text ===== */ --color-text-primary: var(--slate-900); /* h1-h6, body */ --color-text-secondary: var(--slate-600); /* sub-text, labels */ --color-text-muted: var(--slate-400); /* placeholder, meta, timestamp */ --color-text-inverse: #ffffff; /* on filled brand button */ /* ===== Semantic — Border ===== */ --color-border: var(--slate-200); --color-border-strong: var(--slate-300); /* ===== Semantic — Shadow (RGB form per alpha control) ===== */ --color-shadow-rgb: 15, 23, 42; /* slate-900 */ --color-shadow-sm: 0 1px 2px rgba(var(--color-shadow-rgb), 0.05); --color-shadow-md: 0 4px 12px rgba(var(--color-shadow-rgb), 0.08); --color-shadow-lg: 0 20px 60px rgba(var(--color-shadow-rgb), 0.12); /* ===== Transitions (P1 7.1: tokens condivisi per consistency) ===== */ --transition-fast: 120ms ease-out; --transition-medium: 220ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1); /* ===== Intent — Success / Warning / Danger / Info ===== */ /* Pattern: =solid color, -bg=light tint, -text=dark text */ --color-success: #16a34a; --color-success-bg: #dcfce7; --color-success-text: #15803d; --color-warning: #f59e0b; --color-warning-bg: #fef3c7; --color-warning-text: #b45309; --color-danger: #dc2626; --color-danger-bg: #fef2f2; --color-danger-text: #991b1b; --color-info: #3b82f6; --color-info-bg: #dbeafe; --color-info-text: #1e40af; } /* ===== Dark theme overrides ===== */ [data-theme="dark"] { /* ===== Background ===== */ --color-bg-base: var(--slate-800); --color-bg-surface: var(--slate-700); --color-bg-elevated: var(--slate-700); --color-bg-muted: var(--slate-600); --color-bg-subtle: var(--slate-600); /* ===== Text ===== */ --color-text-primary: var(--slate-100); --color-text-secondary: var(--slate-300); --color-text-muted: var(--slate-400); --color-text-inverse: var(--slate-900); /* ===== Border ===== */ --color-border: var(--slate-600); --color-border-strong: var(--slate-500); /* ===== Shadow — solid black, alpha moderate in dark (P0 fix 3.2: ridotto da 0.40/0.60 a 0.25/0.45 per look meno "stampato"/oppressivo) ===== */ --color-shadow-rgb: 0, 0, 0; --color-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --color-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --color-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45); /* ===== Intent — bg semitrasparente, text piu chiaro per contrasto ===== */ --color-success-bg: rgba(22, 163, 74, 0.15); --color-success-text: #4ade80; --color-warning-bg: rgba(245, 158, 11, 0.15); --color-warning-text: #fbbf24; --color-danger-bg: rgba(220, 38, 38, 0.18); --color-danger-text: #f87171; --color-info-bg: rgba(59, 130, 246, 0.15); --color-info-text: #60a5fa; }