/* ============================================================================= MyDigital Agency — Sistema cromatico Palette 02 Heritage italiano · v1.0.0 · 4 maggio 2026 Quattro famiglie: - Neutrali warm zinc (struttura) - Brand red (firma) - Semantici contemporanei sobri (stati funzionali) - Superfici (mappatura ruolo → colore) Light mode = default · Dark mode via prefers-color-scheme + classe .dark Tutti i contrasti WCAG AA minimo, AAA dove tecnicamente possibile. ============================================================================= */ :root { /* =========================================================================== NEUTRALI WARM ZINC · LIGHT MODE Sottotono terra (umber soffio), mai blu/grigio freddo. =========================================================================== */ --zinc-50: #FFFFFF; /* Background principale */ --zinc-100: #F1EFE8; /* Sezioni alternate, surface 2 */ --zinc-200: #E5E2D8; /* Border sottile, hairlines */ --zinc-300: #D3D1C7; /* Border marcato */ --zinc-400: #B4B2A9; /* Disabled state, placeholder */ --zinc-500: #888780; /* Caption, metadata */ --zinc-600: #6E6D67; /* Caption AAA contrast (5.1:1) */ --zinc-700: #56554F; /* Body secondary AAA (7.4:1) */ --zinc-800: #2C2C2A; /* Sottotitoli */ --zinc-900: #18181B; /* Body primary AAA (17.2:1) */ --pure-white: #FFFFFF; /* Surface 1, card su crema */ /* =========================================================================== BRAND · ROSSO FIRMA Solo per CTA primary forte, focus ring (parte interna), errore input. =========================================================================== */ --brand-red-88: rgba(223, 11, 11, 0.88); /* Logo, simbolo, accent identitario */ --brand-red-solid: #C42121; /* CTA primary bg default */ --brand-red-hover: #A31818; /* CTA primary hover (AAA 7.5:1) */ --brand-red-active: #821212; /* CTA primary active (AAA 9.1:1) */ --brand-red-tint: #FCEBEB; /* Pillole, badge bg leggero */ /* =========================================================================== SEMANTICI · CONTEMPORANEI SOBRI Da usare solo per STATI funzionali, mai come accenti decorativi. =========================================================================== */ --semantic-success: #2F6B47; /* Conformità ANAC, validazioni */ --semantic-warning: #B07415; /* Scadenze, attenzioni */ --semantic-danger: #802818; /* Errori, non conformità (lontano dal brand red) */ --semantic-info: #1F4869; /* Note, hint, info istituzionale */ /* =========================================================================== SUPERFICI · MAPPATURA RUOLO =========================================================================== */ --color-bg: var(--zinc-50); /* Background principale */ --color-surface-1: var(--pure-white); /* Card, modali */ --color-surface-2: var(--zinc-100); /* Sezioni alternate */ --color-surface-dark: var(--zinc-900); /* Manifesto, hero scuri */ --color-border-subtle: var(--zinc-200); --color-border-emphasis: var(--zinc-300); --color-text-primary: var(--zinc-900); /* Body, titoli (17.2:1 AAA) */ --color-text-secondary: var(--zinc-700); /* Deck, descrizioni (7.4:1 AAA) */ --color-text-caption: var(--zinc-600); /* Caption, meta (5.1:1 AA+) */ --color-text-disabled: var(--zinc-400); /* Disabled (3:1 AA) */ --color-text-on-dark: var(--zinc-50); /* Testo su surface-dark */ --color-text-on-brand: var(--pure-white); /* Testo su CTA primary */ /* =========================================================================== STATI INTERATTIVI · LIGHT MODE Regola: rosso brand SOLO per CTA primary forte. Tutto il resto in zinc. =========================================================================== */ /* CTA primary forte (rosso) */ --cta-primary-bg: var(--brand-red-solid); --cta-primary-bg-hover: var(--brand-red-hover); --cta-primary-bg-active: var(--brand-red-active); --cta-primary-bg-disabled: var(--zinc-200); --cta-primary-text: var(--pure-white); --cta-primary-text-disabled: var(--zinc-400); /* CTA secondary neutro (zinc 900) */ --cta-secondary-bg: var(--zinc-900); --cta-secondary-bg-hover: var(--zinc-800); --cta-secondary-bg-active: #444441; --cta-secondary-bg-disabled: var(--zinc-200); --cta-secondary-text: var(--zinc-50); --cta-secondary-text-disabled: var(--zinc-400); /* Ghost button (text only, no border) */ --ghost-text: var(--zinc-900); --ghost-text-hover: var(--zinc-900); --ghost-bg-hover: var(--zinc-100); --ghost-bg-active: var(--zinc-200); --ghost-text-disabled: var(--zinc-400); /* Link inline */ --link-inline-text: var(--zinc-900); --link-inline-underline: var(--zinc-900); --link-inline-bg-hover: var(--zinc-100); /* Link nav */ --link-nav-active: var(--zinc-900); /* voce attiva o hover */ --link-nav-inactive: var(--zinc-700); /* voce a riposo */ /* Input field */ --input-bg: var(--pure-white); --input-border: var(--zinc-300); --input-border-hover: var(--zinc-900); --input-border-focus: var(--zinc-900); --input-border-error: var(--semantic-danger); --input-text: var(--zinc-900); --input-placeholder: var(--zinc-400); /* Focus ring · regola universale (bicolore halo) */ --focus-ring-inner: var(--zinc-50); /* anello esterno = bg */ --focus-ring-outer: var(--zinc-900); /* anello "contrasto" */ /* =========================================================================== TIPOGRAFIA — RUOLI CROMATICI (mapping Punti A-O brand book) =========================================================================== */ --type-display: var(--zinc-900); --type-h1: var(--zinc-900); --type-h2: var(--zinc-800); --type-h3: var(--zinc-700); --type-body: var(--zinc-900); --type-body-small: var(--zinc-700); --type-caption: var(--zinc-600); --type-eyebrow: var(--brand-red-solid); } /* ============================================================================= DARK MODE Attivazione automatica via prefers-color-scheme. I ruoli si invertono: zinc-900 ↔ zinc-50. ============================================================================= */ @media (prefers-color-scheme: dark) { :root { /* Background scale dark — non specchio diretto, ottimizzato per contrasto */ --dark-bg: #121214; /* Background principale */ --dark-surface-1: #1E1E21; /* Card, modali */ --dark-surface-2: #28282C; /* Sezioni alternate */ --dark-border-subtle: #2E2E33; --dark-border-emphasis: #444448; --dark-text-disabled: #5F5E62; /* (3:1 AA) */ --dark-text-caption: #A8A6A0; /* (5.1:1 AA+) */ --dark-text-secondary: #C4C2BB; /* (7.4:1 AAA) */ --dark-text-primary: #FFFFFF; /* (17.2:1 AAA) */ /* Brand red dark mode (versioni più chiare per contrasto su scuro) */ --brand-red-dark-default: #E14D4D; /* CTA primary bg (AA+ 5.8:1) */ --brand-red-dark-hover: #F07070; /* hover (AAA 7.5:1) */ --brand-red-dark-active: #FA9595; /* active (AAA 9.1:1) */ --brand-red-dark-tint: #3D1A1A; /* bg pillole dark */ /* Semantici dark — schiariti per contrasto AAA */ --semantic-success-dark: #5BAA76; /* AAA 7.2:1 */ --semantic-warning-dark: #E0A33F; /* AAA 7.6:1 */ --semantic-danger-dark: #D55A45; /* AAA 7.4:1 */ --semantic-info-dark: #5C8AB4; /* AAA 7.0:1 */ /* Override delle superfici */ --color-bg: var(--dark-bg); --color-surface-1: var(--dark-surface-1); --color-surface-2: var(--dark-surface-2); --color-surface-dark: var(--zinc-900); /* invariato: il "manifesto scuro" resta zinc-900 anche in dark */ --color-border-subtle: var(--dark-border-subtle); --color-border-emphasis: var(--dark-border-emphasis); --color-text-primary: var(--dark-text-primary); --color-text-secondary: var(--dark-text-secondary); --color-text-caption: var(--dark-text-caption); --color-text-disabled: var(--dark-text-disabled); --color-text-on-dark: var(--dark-text-primary); --color-text-on-brand: var(--dark-bg); /* su CTA rossa chiara serve testo scuro */ /* CTA primary in dark */ --cta-primary-bg: var(--brand-red-dark-default); --cta-primary-bg-hover: var(--brand-red-dark-hover); --cta-primary-bg-active: var(--brand-red-dark-active); --cta-primary-bg-disabled: var(--dark-border-subtle); --cta-primary-text: var(--dark-bg); --cta-primary-text-disabled: var(--dark-text-disabled); /* CTA secondary in dark (inverte: ora chiaro su scuro) */ --cta-secondary-bg: var(--dark-text-primary); --cta-secondary-bg-hover: var(--dark-text-secondary); --cta-secondary-bg-active: var(--dark-text-caption); --cta-secondary-bg-disabled: var(--dark-border-subtle); --cta-secondary-text: var(--dark-bg); --cta-secondary-text-disabled: var(--dark-text-disabled); /* Ghost in dark */ --ghost-text: var(--dark-text-primary); --ghost-text-hover: var(--dark-text-primary); --ghost-bg-hover: var(--dark-surface-2); --ghost-bg-active: var(--dark-border-emphasis); --ghost-text-disabled: var(--dark-text-disabled); /* Link inline in dark */ --link-inline-text: var(--dark-text-primary); --link-inline-underline: var(--dark-text-primary); --link-inline-bg-hover: var(--dark-surface-2); /* Link nav in dark */ --link-nav-active: var(--dark-text-primary); --link-nav-inactive: var(--dark-text-secondary); /* Input in dark */ --input-bg: var(--dark-surface-1); --input-border: var(--dark-border-emphasis); --input-border-hover: var(--dark-text-primary); --input-border-focus: var(--dark-text-primary); --input-border-error: var(--semantic-danger-dark); --input-text: var(--dark-text-primary); --input-placeholder: var(--dark-text-disabled); /* Focus ring bicolore in dark */ --focus-ring-inner: var(--dark-bg); /* anello esterno = bg scuro */ --focus-ring-outer: var(--dark-text-primary); /* anello contrasto chiaro */ /* Tipografia in dark */ --type-display: var(--dark-text-primary); --type-h1: var(--dark-text-primary); --type-h2: var(--dark-text-primary); --type-h3: var(--dark-text-secondary); --type-body: var(--dark-text-primary); --type-body-small: var(--dark-text-secondary); --type-caption: var(--dark-text-caption); --type-eyebrow: var(--brand-red-dark-default); } } /* ============================================================================= DARK MODE · OVERRIDE MANUALE Per quando la classe `.dark` viene applicata manualmente all' o al body (toggle utente, override CMS). Stessa logica del @media query, ma con specificità maggiore. ============================================================================= */ .dark { --color-bg: #121214; --color-surface-1: #1E1E21; --color-surface-2: #28282C; --color-surface-dark: var(--zinc-900); --color-border-subtle: #2E2E33; --color-border-emphasis: #444448; --color-text-primary: #FFFFFF; --color-text-secondary: #C4C2BB; --color-text-caption: #A8A6A0; --color-text-disabled: #5F5E62; --color-text-on-dark: #FFFFFF; --color-text-on-brand: #121214; --cta-primary-bg: #E14D4D; --cta-primary-bg-hover: #F07070; --cta-primary-bg-active: #FA9595; --cta-primary-bg-disabled: #2E2E33; --cta-primary-text: #121214; --cta-primary-text-disabled: #5F5E62; --cta-secondary-bg: #FFFFFF; --cta-secondary-bg-hover: #C4C2BB; --cta-secondary-bg-active: #A8A6A0; --cta-secondary-bg-disabled: #2E2E33; --cta-secondary-text: #121214; --cta-secondary-text-disabled: #5F5E62; --ghost-text: #FFFFFF; --ghost-text-hover: #FFFFFF; --ghost-bg-hover: #28282C; --ghost-bg-active: #444448; --ghost-text-disabled: #5F5E62; --link-inline-text: #FFFFFF; --link-inline-underline: #FFFFFF; --link-inline-bg-hover: #28282C; --link-nav-active: #FFFFFF; --link-nav-inactive: #C4C2BB; --input-bg: #1E1E21; --input-border: #444448; --input-border-hover: #FFFFFF; --input-border-focus: #FFFFFF; --input-border-error: #D55A45; --input-text: #FFFFFF; --input-placeholder: #5F5E62; --focus-ring-inner: #121214; --focus-ring-outer: #FFFFFF; --type-display: #FFFFFF; --type-h1: #FFFFFF; --type-h2: #FFFFFF; --type-h3: #C4C2BB; --type-body: #FFFFFF; --type-body-small: #C4C2BB; --type-caption: #A8A6A0; --type-eyebrow: #E14D4D; } /* ============================================================================= FOCUS RING · UTILITY CLASS Da applicare a TUTTI gli elementi interattivi (button, a, input, select). Bicolore halo, WCAG 2.4.13 conforme. ============================================================================= */ *:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-inner), 0 0 0 4px var(--focus-ring-outer); border-radius: 4px; /* override locale se l'elemento ha radius diverso */ } /* ============================================================================= CLASSI DI UTILITÀ (opzionali, per uso rapido) ============================================================================= */ .bg-brand { background-color: var(--brand-red-solid); } .bg-surface-1 { background-color: var(--color-surface-1); } .bg-surface-2 { background-color: var(--color-surface-2); } .bg-surface-dark { background-color: var(--color-surface-dark); } .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-caption { color: var(--color-text-caption); } .text-eyebrow { color: var(--type-eyebrow); } .border-subtle { border: 0.5px solid var(--color-border-subtle); } .border-emphasis { border: 0.5px solid var(--color-border-emphasis); }