/* ========================================================================== EUROSTONE — DESIGN TOKENS Architettura a tre livelli: primitivi → semantici → componente. Nei componenti si usano SOLO i token semantici: mai un hex grezzo. Restyling editoriale del 29 ottobre 2026: palette e tipografia vengono dalle tre ispirazioni del cliente (crema, sabbia, caffè, bronzo; serif Cormorant). Il logo resta l'originale, blu #034F8B e giallo #FFD335: è l'unico punto del sito dove quei due colori compaiono. ========================================================================== */ :root { /* ====================================================================== 1. PRIMITIVI — la materia grezza. Non usarli mai direttamente nei componenti: servono solo a comporre i token semantici al punto 2. ====================================================================== */ /* 1.1 Caffè — la scala scura del restyling editoriale (29 ottobre 2026). Prende il posto del blu nelle grandi campiture: bande, footer, bottoni. È il nero caldo delle tre ispirazioni del cliente, mai un nero puro. Il blu e il giallo restano solo nel logo, che è l'originale e non si ricolora. */ --caffe-950: #12100E; /* fondi notturni, footer */ --caffe-900: #1C1916; /* ◆ superficie scura principale, azioni */ --caffe-800: #2A2621; /* superficie scura elevata */ --caffe-700: #3D362F; /* hover del bottone scuro */ --caffe-600: #554B41; --caffe-500: #6E6254; --caffe-300: #A89A87; --caffe-200: #CFC4B3; --caffe-100: #E6DED1; /* superfici tenui, selezione */ --caffe-050: #F1ECE3; /* wash appena percettibile */ /* 1.2 Bronzo — l'accento caldo. Sostituisce il giallo: filetti, occhielli e dettagli. Su fondo chiaro si usa solo la versione scura (700), che regge come testo. */ --bronzo-700: #7A6145; /* testo accento su fondo chiaro — 5,1:1 */ --bronzo-600: #9C8163; /* bordi e icone su fondo chiaro */ --bronzo-500: #C9B497; /* ◆ filetti e accenti su scuro */ --bronzo-400: #DCCBB0; /* testo accento su fondo scuro */ --bronzo-200: #EDE3D3; --bronzo-100: #F5EFE5; /* 1.3 Neutri di pietra — crema, sabbia e pietra delle ispirazioni: caldi, mai grigi freddi. */ --pietra-000: #FFFFFF; --pietra-025: #F7F4EE; --pietra-050: #EFEAE1; --pietra-100: #E6DFD3; --pietra-200: #D7CEBF; --pietra-300: #BDB1A0; --pietra-400: #988C7B; --pietra-500: #736859; --pietra-600: #564D42; --pietra-700: #3D3730; --pietra-800: #282420; --pietra-900: #1A1815; --pietra-950: #0F0E0C; /* 1.4 Funzionali */ --verde-600: #2F6B4F; /* successo */ --verde-050: #E9F3EE; --rosso-600: #A32B22; /* errore — contrasto 5.4:1 su bianco */ --rosso-050: #FBECEA; --ambra-600: #8A5A10; /* avviso */ --ambra-050: #FCF3E4; /* ====================================================================== 2. SEMANTICI — questi sono i token che i componenti possono usare. ====================================================================== */ /* 2.1 Superfici */ --superficie-base: var(--pietra-025); /* fondo pagina */ --superficie-alt: var(--pietra-050); /* sezioni alternate */ --superficie-elevata: var(--pietra-000); /* card, dialog */ --superficie-incassata: var(--pietra-100); /* input, wells */ --superficie-scura: var(--caffe-900); /* footer, banda CTA */ --superficie-scura-alt: var(--caffe-950); --superficie-scura-elev: var(--caffe-800); --superficie-inversa: var(--pietra-900); /* overlay neutro scuro */ /* 2.2 Testo — verificati contro le rispettive superfici (§5) */ --testo-primario: var(--pietra-900); --testo-secondario: var(--pietra-600); --testo-terziario: var(--pietra-500); --testo-disabilitato: var(--pietra-400); --testo-su-scuro: var(--pietra-025); --testo-su-scuro-sec: #B8AD9C; /* 7,6:1 su --caffe-900 */ --testo-brand: var(--bronzo-700); --testo-accento: var(--bronzo-700); --testo-errore: var(--rosso-600); --testo-successo: var(--verde-600); /* 2.3 Bordi e filetti */ --bordo-tenue: var(--pietra-100); --bordo-default: var(--pietra-200); --bordo-forte: var(--pietra-300); --bordo-su-scuro: rgba(255, 255, 255, 0.14); --bordo-accento: var(--bronzo-500); --bordo-focus: var(--caffe-900); /* 2.4 Azioni */ --azione-primaria-bg: var(--caffe-900); --azione-primaria-bg-hover: var(--caffe-700); --azione-primaria-testo: var(--pietra-025); --azione-secondaria-bordo: var(--caffe-900); --azione-secondaria-testo: var(--pietra-900); --azione-secondaria-bg-hover: var(--caffe-900); --azione-accento-bg: var(--pietra-025); /* su scuro: il bottone crema */ --azione-accento-bg-hover: var(--bronzo-200); --azione-accento-testo: var(--caffe-950); /* 2.5 Focus — visibile su qualsiasi fondo (WCAG 2.2 §2.4.11) */ --focus-anello: 2px solid var(--caffe-900); --focus-anello-scuro: 2px solid var(--bronzo-400); --focus-offset: 3px; /* ====================================================================== 3. TIPOGRAFIA ====================================================================== */ --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', Georgia, serif; --font-testo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; /* Scala tipografica — rapporto 1.25 su mobile, 1.333 da desktop. clamp() = fluida senza breakpoint, senza mai scendere sotto i 16px sul corpo. */ --testo-2xs: 0.6875rem; /* 11px — solo label maiuscole */ --testo-xs: 0.75rem; /* 12px */ --testo-sm: 0.875rem; /* 14px */ --testo-base: 1rem; /* 16px — minimo del corpo */ --testo-lg: clamp(1.0625rem, 0.99rem + 0.31vw, 1.25rem); --testo-xl: clamp(1.375rem, 1.27rem + 0.5vw, 1.75rem); --testo-2xl: clamp(1.625rem, 1.43rem + 0.9vw, 2.25rem); --testo-3xl: clamp(2.125rem, 1.74rem + 1.9vw, 3.5rem); --testo-4xl: clamp(2.625rem, 1.95rem + 3.3vw, 5rem); --testo-5xl: clamp(3rem, 1.9rem + 5.4vw, 6.5rem); --testo-6xl: clamp(3.5rem, 1.9rem + 7.6vw, 8rem); --peso-light: 300; --peso-normale: 400; --peso-medio: 500; --peso-semi: 600; --peso-bold: 700; --interlinea-stretta: 1.02; /* display di grande formato */ --interlinea-titolo: 1.12; --interlinea-media: 1.45; --interlinea-corpo: 1.65; /* testo lungo */ --spaziatura-display: -0.015em; /* i grandi corpi vanno serrati */ --spaziatura-titolo: -0.01em; --spaziatura-normale: 0; --spaziatura-label: 0.14em; /* label maiuscole */ --spaziatura-occhiello: 0.28em; --misura-testo: 68ch; /* lunghezza riga massima per il testo lungo */ --misura-stretta: 46ch; /* ====================================================================== 4. SPAZIO, GRIGLIA, FORME, MOVIMENTO ====================================================================== */ /* 4.1 Scala 4/8px */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --sp-40: 10rem; /* 4.2 Ritmo verticale delle sezioni — fluido */ --sezione-y: clamp(3.5rem, 2.4rem + 5.5vw, 7.5rem); --sezione-y-lg: clamp(5rem, 3.2rem + 9vw, 10rem); --sezione-y-sm: clamp(2.5rem, 1.9rem + 3vw, 4.5rem); /* 4.3 Contenitori e gutter (crescono col viewport: regola adaptive-gutters) */ --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 3rem); --contenitore: 1360px; --contenitore-stretto: 880px; --contenitore-largo: 1680px; /* 4.4 Raggi — a zero: nelle ispirazioni ogni bordo è squadrato */ --raggio-xs: 0; --raggio-sm: 0; --raggio-md: 0; --raggio-lg: 2px; --raggio-pill: 999px; /* 4.5 Ombre — a due strati, calde (mai nero puro su fondo caldo) */ --ombra-xs: 0 1px 2px rgba(20, 19, 17, 0.05); --ombra-sm: 0 1px 2px rgba(28, 25, 22, 0.04); --ombra-md: 0 1px 2px rgba(28, 25, 22, 0.04), 0 10px 30px rgba(28, 25, 22, 0.06); --ombra-lg: 0 2px 6px rgba(28, 25, 22, 0.05), 0 24px 60px rgba(28, 25, 22, 0.10); --ombra-xl: 0 8px 16px rgba(20, 19, 17, 0.07), 0 32px 72px rgba(20, 19, 17, 0.14); /* 4.6 Movimento — 150-300ms sulle micro-interazioni, uscite più rapide delle entrate (regola exit-faster-than-enter). */ /* Sistema di movimento unico (29 ottobre 2026): tre durate e due curve. Prima ogni sezione aveva i suoi tempi (0,45 / 0,5 / 0,6 / 0,7 / 1,1 / 1,2 / 1,4 s); ora tutto il sito si muove con lo stesso respiro. rapida — feedback dei comandi: colori, bordi, frecce media — elementi: comparse, card, filetti, pillole lenta — immagini: zoom, dissolvenze di foto e video */ --moto-rapida: 200ms; --moto-media: 500ms; --moto-lenta: 1000ms; --curva-entrata: cubic-bezier(0.16, 1, 0.3, 1); /* decelera: ciò che arriva */ --curva-uscita: cubic-bezier(0.4, 0, 1, 1); /* accelera: ciò che se ne va */ --moto-zoom: 1.04; /* avvicinamento delle immagini al passaggio */ /* Nomi storici, ora agganciati al sistema */ --dur-istantanea: 120ms; --dur-veloce: var(--moto-rapida); --dur-media: var(--moto-rapida); --dur-lenta: var(--moto-media); --dur-scenica: var(--moto-media); --ease-standard: var(--curva-entrata); --ease-entrata: var(--curva-entrata); --ease-uscita: var(--curva-uscita); --ease-morbida: var(--curva-entrata); /* 4.7 Livelli z — scala dichiarata, niente numeri inventati */ --z-sotto: -1; --z-base: 0; --z-elevato: 10; --z-sticky: 100; --z-header: 200; --z-drawer-velo: 300; --z-drawer: 310; --z-dialog-velo: 400; --z-dialog: 410; --z-cookie: 500; /* il banner cookie sta sopra tutto tranne i toast */ --z-toast: 600; --z-skiplink: 700; /* 4.8 Misure ricorrenti */ --header-h: 84px; --tocco-min: 44px; /* area di tocco minima (Apple HIG) */ } /* ========================================================================== 5. VERIFICA CONTRASTO (WCAG 2.2 AA) — ricalcolata sui colori del logo ufficiale, non stimata. -------------------------------------------------------------------------- testo-primario #1A1815 su superficie-base #F7F4EE → 16,4:1 AAA testo-secondario #564D42 su superficie-base #F7F4EE → 7,9:1 AAA testo-terziario #736859 su superficie-alt #EFEAE1 → 4,6:1 AA testo-brand #7A6145 su superficie-base #F7F4EE → 5,1:1 AA testo-su-scuro #F7F4EE su superficie-scura #1C1916 → 15,9:1 AAA testo-su-scuro-sec #B8AD9C su superficie-scura #1C1916 → 7,6:1 AAA bronzo-400 #DCCBB0 su superficie-scura #1C1916 → 11,4:1 AAA azione-primaria: #F7F4EE su #1C1916 → 15,9:1 AAA azione-accento: #12100E su #F7F4EE → 17,0:1 AAA -------------------------------------------------------------------------- Il bronzo chiaro #C9B497 NON è mai usato come testo su fondo chiaro: là il contrasto scenderebbe a 1,9:1. Su chiaro si usa --bronzo-700. ========================================================================== */ /* ========================================================================== 6. PREFERENZE UTENTE ========================================================================== */ /* 6.1 Movimento ridotto — non "quasi zero": azzerato davvero. */ @media (prefers-reduced-motion: reduce) { :root { --moto-rapida: 1ms; --moto-media: 1ms; --moto-lenta: 1ms; --dur-istantanea: 1ms; --dur-veloce: 1ms; --dur-media: 1ms; --dur-lenta: 1ms; --dur-scenica: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* 6.2 Contrasto elevato */ @media (prefers-contrast: more) { :root { --testo-secondario: var(--pietra-800); --testo-terziario: var(--pietra-700); --bordo-default: var(--pietra-400); --bordo-tenue: var(--pietra-300); --focus-offset: 4px; } }