/* ============================================================ tokens.css — DESIGN TOKENS GLOBALI Unica fonte di verita' per colori, tipografia, spacing, radius. Estratti e normalizzati da metodo-de-cenzo (gold standard). Regola d'oro: se devi usare un valore fisso in un'altra pagina, prima guarda se esiste gia' qui. Se non c'e', aggiungilo QUI e riusalo — non hardcodare nei componenti. ============================================================ */ :root { /* ---------- COLORI brand ---------- */ --blue: #2C3E7A; --blue-dk: #1a2a5a; --green: #2E7D3F; --green-dk: #245f30; --green-lt: #E8F5E9; /* bg chiaro per pill/badge su white */ /* --orange: WCAG AA 5.82:1 on white — passa AA body 4.5 */ --orange: #A8481A; --orange-dk: #7A3210; /* hover state brand — 9.17:1 on white */ --orange-lt: #FF9800; /* usare SOLO su sfondi scuri (2.16:1 su white, FAILS) */ --coral: #FFA5A5; /* 5.38:1 su blue #2C3E7A — passa AA */ /* colori "commercial" dedicati a zone prezzi/offerta */ --green-bright: #0AAA00; /* prezzo "oggi 47" evidenziato */ --red-price: #950101; /* prezzo barrato "normalmente 97" */ /* YouTube brand red — usato solo dove serve richiamare YouTube (icona play, pillola "ISCRIVITI AL CANALE"). AA-safe su bianco (4.53:1) e perfetto su sfondi scuri. */ --youtube-red: #FF0000; --youtube-red-dk: #CC0000; /* hover */ /* oro — guarantee / reassurance / premium accents */ --gold: #C9A227; /* decorative: border, ornament, fill */ --gold-dk: #8B6508; /* text-safe: 5.36:1 su white (AA) */ --gold-lt: #FDF6DD; /* fill morbido: badge bg / tint card */ /* ---------- COLORI neutri ---------- */ --dark: #1E1A17; --text: #2A2520; --muted: #6B6259; --bg: #F7F4EF; --bg-lavender: #F8F6F9; /* bg "closing offer": leggermente più freddo del cream */ --white: #FFFFFF; --black: #000000; --border: #EEEEEE; --border-dk: #666666; /* ---------- ALPHA overlays (riusabili su qualsiasi sfondo) ---------- */ --overlay-dark-20: rgba(0, 0, 0, 0.20); --overlay-dark-40: rgba(0, 0, 0, 0.40); --overlay-dark-80: rgba(0, 0, 0, 0.80); --overlay-light-10: rgba(255, 255, 255, 0.10); --overlay-light-20: rgba(255, 255, 255, 0.20); --overlay-light-30: rgba(255, 255, 255, 0.30); --overlay-light-60: rgba(255, 255, 255, 0.60); --overlay-light-70: rgba(255, 255, 255, 0.70); --overlay-light-90: rgba(255, 255, 255, 0.90); --overlay-orange-25: rgba(168, 72, 26, 0.25); /* tint di --orange */ --overlay-green-15: rgba(46, 125, 63, 0.15); --overlay-blue-95: rgba(26, 42, 90, 0.95); /* ---------- TIPOGRAFIA ---------- */ /* Fallback "Raleway Fallback"/"Roboto Slab Fallback" matcha le metriche del font reale via size-adjust/ascent-override in base.css: elimina il CLS del font swap. Vedi base.css per i @font-face. */ --font: 'Raleway', 'Raleway Fallback', Arial, sans-serif; --serif: 'Roboto Slab', 'Roboto Slab Fallback', Georgia, serif; /* scala font-size (coerente con i valori piu' usati nel gold) */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 21px; /* body size del gold */ --fs-xl: 24px; --fs-2xl: 28px; --fs-3xl: 32px; --fs-4xl: 42px; --fs-5xl: 56px; /* line-height */ --lh-tight: 1.2; /* titoli */ --lh-snug: 1.4; /* paragrafi brevi / centrati / lead su sfondo scuro */ --lh-normal: 1.6; /* body long-form prose */ --lh-loose: 1.8; /* font-weight */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---------- SPACING (scala geometrica, multipli di 4) ---------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 30px; --sp-8: 40px; --sp-9: 60px; --sp-10: 80px; --sp-11: 120px; /* padding di sezione (i piu' usati nel gold) */ --section-pad-y: 60px; --section-pad-x: 20px; --section-pad: var(--section-pad-y) var(--section-pad-x); /* ---------- RADIUS ---------- */ --radius-xs: 3px; --radius-sm: 5px; /* --radius storico del gold */ --radius: 5px; /* alias compat */ --radius-md: 8px; --radius-lg: 12px; --radius-xl: 30px; --radius-full: 9999px; /* pillola */ --radius-circle: 50%; /* ---------- SHADOW ---------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.10); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.10); /* --shadow storico */ --shadow: var(--shadow-lg); /* alias compat */ --shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.12); --shadow-brand: 0 20px 45px var(--overlay-orange-25); /* ---------- LAYOUT ---------- Valori estratti dal gold: .wrap -> 800px (usiamo --container-sm) .wrap-narrow -> 700px (usiamo --container-narrow) --container (1120px) e --container-lg (1280px) sono per sezioni larghe (pricing, grid mockup, ecc.). */ --container: 1120px; --container-sm: 800px; /* = .wrap del gold */ --container-md: 1080px; /* card promo "medium" (larga respira-contenuto) */ --container-narrow: 700px; /* = .wrap-narrow del gold */ --container-lg: 1280px; /* ---------- READING-WIDTH (UNIFORME) ---------- Un solo valore per la larghezza di lettura dei testi lunghi (narrative, prose, intro/coda testimonial, divider, liste). Via di mezzo tra i vari valori convenzionali (640-820) per avere coerenza visiva su tutta la pagina. A 21px font-size da circa 62-66 char/riga (dentro il range 60-75 consigliato). Uso: max-width: var(--reading-width) su qualsiasi paragrafo lungo o lista (dentro qualunque container piu' largo). */ --reading-width: 800px; /* ---------- TRANSIZIONI ---------- */ --t-fast: 150ms ease; --t-base: 250ms ease; --t-slow: 400ms ease; /* ---------- Z-INDEX ---------- */ --z-base: 1; --z-sticky: 50; --z-overlay: 100; --z-modal: 200; --z-top: 999; } /* ============================================================ BREAKPOINTS DI RIFERIMENTO (commento, no sintassi nativa) Usa questi valori nelle @media dei singoli componenti. Mobile-first: base = mobile, poi si scala in alto. sm: 480px — small phones in landscape / phablet md: 768px — tablet portrait lg: 1024px — tablet landscape / laptop piccoli xl: 1280px — desktop 2xl: 1536px — wide desktop ============================================================ */