/* ========================================================================== Design token — Formazione Erogata Solo custom properties. Nessuna regola: i component leggono da qui. Un tema alternativo (es. dark) sara' un solo blocco [data-theme="..."]. ========================================================================== */ :root { /* --- Colori neutri --- */ --c-bg: #f5f6f8; --c-surface: #ffffff; --c-surface-2: #eef1f4; --c-surface-3: #e4e8ee; --c-border: #d8dee6; --c-border-strong: #b9c2ce; --c-text: #1f2733; --c-text-muted: #5b6675; --c-text-faint: #8a94a3; --c-text-inverse: #ffffff; /* superfici "sollevate" (pulsanti/tile): in chiaro coincidono con surface, in scuro salgono di un gradino per staccare dallo sfondo */ --c-raised: var(--c-surface); /* --- Accento --- */ --c-accent: #2563eb; --c-accent-hover: #1d4ed8; --c-accent-active: #1e40af; --c-accent-soft: #e8f0fe; --c-on-accent: #ffffff; /* --- Semantici (colore pieno + fondo tenue + variante hover/sorting) --- */ --c-success: #1e8e4e; --c-success-soft: #e6f4ea; --c-success-soft-2: #d7ecdd; --c-danger: #d92d20; --c-danger-soft: #fdecea; --c-danger-soft-2: #fbdcd8; --c-warning: #b7791f; --c-warning-soft: #fbf3e2; --c-info: #2563eb; --c-info-soft: #e8f0fe; /* --- Varie legate al tema --- */ --logo-src: url("/img/logo-light.png"); /* logo con testo scuro, per fondo chiaro */ --icon-theme: url("/img/ic-moon.svg"); /* icona del toggle: luna in chiaro */ /* --- Focus --- */ --c-focus-ring: rgba(37, 99, 235, 0.45); /* --- Tipografia --- */ --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace; --fs-100: 11px; --fs-200: 12px; --fs-300: 13px; /* base */ --fs-400: 15px; --fs-500: 18px; --fs-600: 22px; --fs-700: 28px; --lh-tight: 1.25; --lh-normal: 1.5; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* --- Spacing (scala 4px) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; /* --- Radius --- */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* --- Ombre --- */ --sh-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10); --sh-2: 0 8px 24px rgba(16, 24, 40, 0.16); --sh-focus: 0 0 0 3px var(--c-focus-ring); /* --- Z-index --- */ --z-header: 100; --z-footer: 100; --z-backdrop: 1000; --z-modal: 1001; --z-notify: 1100; /* notify SEMPRE sopra i modali */ /* --- Layout --- */ --header-h: 52px; --footer-h: 26px; --content-max: 1400px; --bp-mobile: 480px; --bp-tablet: 768px; } /* ========================================================================== TEMA SCURO Regole: di default segue il sistema (prefers-color-scheme), a meno che l'utente non abbia forzato il chiaro con [data-theme="light"]. Il toggle nell'header imposta [data-theme="dark"|"light"] su . I valori sono duplicati nei due blocchi: e' l'unico modo in CSS puro per coprire sia "auto da sistema" sia "forzato dall'utente". ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-bg: #0e141d; --c-surface: #1c2735; --c-surface-2: #303c4d; --c-surface-3: #3e4c61; --c-border: #647a95; --c-border-strong: #7d92aa; --c-text: #e9eff6; --c-text-muted: #a8b5c5; --c-text-faint: #7e8c9d; --c-text-inverse: #0e141d; --c-raised: #3a4a63; --c-accent: #5b9dff; --c-accent-hover: #7db0ff; --c-accent-active: #4a8ae6; --c-accent-soft: #16243a; --c-on-accent: #08111f; --c-success: #3fbf72; --c-success-soft: #1d4030; --c-success-soft-2: #245138; --c-danger: #ff6b5e; --c-danger-soft: #5a2b28; --c-danger-soft-2: #6b332f; --c-warning: #e0a33c; --c-warning-soft: #4a3818; --c-info: #5b9dff; --c-info-soft: #16243a; --c-focus-ring: rgba(91, 157, 255, 0.45); --sh-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30); --sh-2: 0 10px 30px rgba(0,0,0,.55); --logo-src: url("/img/logo-dark.png"); /* logo con testo bianco, per fondo scuro */ --icon-theme: url("/img/ic-sun.svg"); } } :root[data-theme="dark"] { --c-bg: #0e141d; --c-surface: #1c2735; --c-surface-2: #303c4d; --c-surface-3: #3e4c61; --c-border: #647a95; --c-border-strong: #7d92aa; --c-text: #e9eff6; --c-text-muted: #a8b5c5; --c-text-faint: #7e8c9d; --c-text-inverse: #0e141d; --c-raised: #3a4a63; --c-accent: #5b9dff; --c-accent-hover: #7db0ff; --c-accent-active: #4a8ae6; --c-accent-soft: #16243a; --c-on-accent: #08111f; --c-success: #3fbf72; --c-success-soft: #1d4030; --c-success-soft-2: #245138; --c-danger: #ff6b5e; --c-danger-soft: #5a2b28; --c-danger-soft-2: #6b332f; --c-warning: #e0a33c; --c-warning-soft: #4a3818; --c-info: #5b9dff; --c-info-soft: #16243a; --c-focus-ring: rgba(91, 157, 255, 0.45); --sh-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30); --sh-2: 0 10px 30px rgba(0,0,0,.55); --logo-src: url("/img/logo-dark.png"); /* logo con testo bianco, per fondo scuro */ --icon-theme: url("/img/ic-sun.svg"); }