/* ========================================================================== tokens.css — l'unico file del progetto in cui può comparire un esadecimale. Se stai per scrivere un colore altrove, il posto giusto è qui. Palette: Blu & Ottone (scelta confermata dal cliente, non in discussione). ========================================================================== */ :root { /* ---------- superfici ---------- */ --c-bg: #FDFCFA; /* fondo prevalente del sito */ --c-surface: #FFFFFF; /* card e riquadri sul fondo */ --c-sand: #F0EBE1; /* fondo alternativo, sezioni di respiro */ --c-navy: #143A66; /* sezioni scure di stacco */ --c-navy-deep: #0E2A4A; /* gradazione più profonda del navy */ /* ---------- marchio ---------- */ --c-blue: #2C6FB5; /* blu primario: link, icone, dati */ --c-blue-hover: #235A94; --c-brass: #C4962C; /* ottone: solo azioni e accenti */ --c-brass-hover: #A87F22; --c-brass-light: #DDB25A; /* ottone schiarito, per testo su navy */ /* Ottone abbastanza scuro da essere TESTO su fondo chiaro. Aggiunto il 05/09/2026: `--c-brass-hover` su bianco da 3,67:1 e sulla riga sabbia della dashboard 3,23:1, sotto la soglia di 4,5:1. Questo da' 5,15 e 4,54. Serve dove l'ottone deve dire una parola, non disegnare un bordo. */ --c-brass-testo: #8A6818; /* ---------- testo ---------- */ --c-ink: #0F1B2A; /* testo principale su chiaro */ --c-ink-2: #4A555F; /* secondario */ --c-ink-3: #6B757E; /* terziario: didascalie, note */ --c-on-dark: #F4F7FA; /* testo su navy */ --c-on-brass: #14233F; /* testo sui pulsanti ottone */ /* ---------- linee ---------- */ --c-line: #E4DED2; /* bordi su fondo sabbia */ --c-line-soft: #EDEAE4; /* separatori leggeri */ /* Il contorno dei controlli: campi, caselle, selettori. Le due righe qui sopra servono a separare, e per separare basta poco. Questa serve a delimitare, ed e' un'altra cosa: il bordo di un campo e' l'unica cosa che dice dove si scrive, e su fondo bianco `--c-line` si ferma a 1.34:1 mentre la soglia per un contorno e' 3. Questo grigio da' 3.66:1 e resta caldo come le altre linee. */ --c-line-forte: #8C8578; /* ---------- stati (validazione form) ---------- */ --c-success: #2E7D53; --c-error: #C0392B; --c-warning: #B4761E; /* ---------- focus ---------- */ --c-focus: #2C6FB5; /* anello di focus, offset 2px */ /* ---------- WhatsApp ---------- Fuori palette di proposito: è il verde del servizio, riconosciuto prima di essere letto. Usato SOLO sul pulsante flottante. */ --c-whatsapp: #25D366; --c-whatsapp-hover: #1EBE5A; --c-on-whatsapp: #06301A; /* ---------- derivati trasparenti ---------- Stanno qui perché rgba() richiede canali numerici e nessun altro file può contenerli. Nomi per funzione, non per aspetto. */ --c-ink-a08: rgba(15, 27, 42, .08); --c-ink-a12: rgba(15, 27, 42, .12); --c-ink-a20: rgba(15, 27, 42, .20); --c-ink-a55: rgba(15, 27, 42, .55); --c-ink-a72: rgba(15, 27, 42, .72); --c-navy-a06: rgba(20, 58, 102, .06); --c-navy-a14: rgba(20, 58, 102, .14); --c-navy-a30: rgba(20, 58, 102, .30); --c-navy-a85: rgba(20, 58, 102, .85); --c-blue-a10: rgba(44, 111, 181, .10); --c-blue-a18: rgba(44, 111, 181, .18); --c-blue-a35: rgba(44, 111, 181, .35); --c-brass-a12: rgba(196, 150, 44, .12); --c-brass-a22: rgba(196, 150, 44, .22); --c-brass-a40: rgba(196, 150, 44, .40); --c-error-a10: rgba(192, 57, 43, .10); --c-success-a10: rgba(46, 125, 83, .10); --c-surface-a00: rgba(255, 255, 255, 0); --c-surface-a70: rgba(255, 255, 255, .70); --c-surface-a92: rgba(255, 255, 255, .92); --c-on-dark-a12: rgba(244, 247, 250, .12); --c-on-dark-a24: rgba(244, 247, 250, .24); --c-on-dark-a70: rgba(244, 247, 250, .70); --c-on-dark-a88: rgba(244, 247, 250, .88); /* ---------- ombre ---------- */ --sh-xs: 0 1px 2px var(--c-ink-a08); --sh-sm: 0 2px 6px var(--c-ink-a08); --sh-md: 0 6px 18px var(--c-ink-a08), 0 1px 3px var(--c-ink-a08); --sh-lg: 0 16px 40px var(--c-ink-a12), 0 2px 6px var(--c-ink-a08); --sh-brass: 0 6px 18px var(--c-brass-a22); --sh-inset-line: inset 0 -1px 0 var(--c-line-soft); /* ---------- gradienti ---------- */ --g-navy: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-deep) 100%); --g-sand-fade: linear-gradient(180deg, var(--c-surface-a00) 0%, var(--c-sand) 100%); --g-brass-rule: linear-gradient(90deg, var(--c-brass) 0%, var(--c-brass-a40) 100%); --g-shimmer: linear-gradient(100deg, var(--c-surface-a00) 20%, var(--c-surface-a70) 50%, var(--c-surface-a00) 80%); /* ========================================================================== TIPOGRAFIA — Fraunces (display) + Inter (testo) Accoppiata confermata dal cliente il 12/08/2026. ========================================================================== */ --ff-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --ff-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Fraunces è variabile su due assi opzionali: SOFT ammorbidisce i terminali, WONK attiva le forme storte. Restano a 0: il tono è deciso, non bizzarro. */ --fv-display: "SOFT" 0, "WONK" 0; /* Scala fluida. Nessun font-size fisso in px sui titoli. I valori girano tra 360px e 1280px di viewport. */ --fs-3xs: 0.75rem; /* 12px — note legali */ --fs-2xs: 0.8125rem; /* 13px — didascalie */ --fs-xs: 0.875rem; /* 14px — etichette */ --fs-sm: 0.9375rem; /* 15px — testo mobile */ --fs-base: clamp(0.9375rem, 0.90rem + 0.16vw, 1rem); /* 15 → 16 */ --fs-md: clamp(1rem, 0.95rem + 0.22vw, 1.125rem); --fs-lg: clamp(1.125rem, 1.05rem + 0.33vw, 1.375rem); --fs-xl: clamp(1.375rem, 1.22rem + 0.65vw, 1.875rem); --fs-2xl: clamp(1.625rem, 1.35rem + 1.20vw, 2.5rem); --fs-3xl: clamp(2rem, 1.55rem + 1.95vw, 3.25rem); --fs-4xl: clamp(2.375rem, 1.70rem + 2.90vw, 4.25rem); /* Numeri delle statistiche e della stima: scala propria, più aggressiva */ --fs-num: clamp(2rem, 1.50rem + 2.20vw, 3.25rem); --fs-num-lg: clamp(2.5rem, 1.70rem + 3.50vw, 4.5rem); --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.06em; --ls-caps: 0.14em; /* occhielli maiuscoli */ --measure: 68ch; /* larghezza massima di lettura */ --measure-tight:52ch; /* ---------- spazi ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; /* Ritmo verticale delle sezioni, fluido */ --sp-section: clamp(3.5rem, 2.2rem + 5.5vw, 7rem); --sp-section-s: clamp(2.5rem, 1.8rem + 3.0vw, 4.5rem); /* ---------- misure ---------- */ --w-page: 1200px; /* contenitore standard */ --w-narrow: 780px; /* testo lungo, form */ --w-wide: 1400px; /* fasce a tutta larghezza */ --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px; --touch: 44px; /* target minimo, non negoziabile */ /* ---------- movimento ---------- */ --d-instant: 90ms; --d-fast: 180ms; --d-base: 320ms; --d-slow: 620ms; --d-reveal: 900ms; /* rivelazione della stima */ --e-out: cubic-bezier(.22, .61, .36, 1); --e-inout: cubic-bezier(.65, .05, .36, 1); --e-soft: cubic-bezier(.33, 1, .68, 1); /* ---------- livelli ---------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; --z-consent: 500; /* il banner sta sopra a tutto */ --z-skip: 600; /* tranne il salta-al-contenuto */ } /* Chi ha chiesto meno movimento lo ottiene alla radice: le durate vanno a zero una volta sola, e ogni componente le eredita senza doverlo sapere. */ @media (prefers-reduced-motion: reduce) { :root { --d-instant: 1ms; --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; } }