/** * theme.css — Variabili di design. * * PROBLEMA RISOLTO: i tre CSS del vecchio progetto (2.800 righe) ripetevano * gli stessi colori scritti a mano decine di volte, con valori leggermente * diversi fra un file e l'altro. Cambiare l'accento significava fare * find & replace. Qui c'è un solo punto da toccare. */ :root { color-scheme: dark; /* superfici */ --bg: #0e1219; --bg-elevated: #151b26; --surface: #1a2130; --surface-hover: #212a3c; --border: #2a3448; --border-strong: #3b4761; /* testo */ --text: #e8edf5; --text-muted: #9aa7bd; --text-faint: #6b7891; /* accenti */ --accent: #4f8cff; --accent-hover: #6ea1ff; --accent-soft: rgba(79, 140, 255, .14); --live: #ff3b4e; --live-soft: rgba(255, 59, 78, .16); --ok: #3ddc84; --warn: #ffb020; --danger: #ff5a5a; --mic: #ff7a1a; /* forma */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow: 0 4px 16px rgba(0, 0, 0, .35); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5); /* spaziature: scala di 4px */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* tipografia */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 19px; --fs-xl: 26px; --transition: 160ms cubic-bezier(.4, 0, .2, 1); } /* Tema chiaro: basta aggiungere data-theme="light" sul . */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6fa; --bg-elevated: #ffffff; --surface: #ffffff; --surface-hover: #eef1f7; --border: #dfe4ed; --border-strong: #c6cddb; --text: #171e2b; --text-muted: #5b6779; --text-faint: #8b95a6; --shadow: 0 2px 10px rgba(20, 30, 50, .1); } /* Rispetta chi ha ridotto le animazioni a livello di sistema. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }