/* ──────────────────────────────────────────────────────────── TOMASELLA STORE LUGANO — design tokens Layerzero Sagl I valori replicano le foundation del brand Tomasella per garantire la coerenza visiva richiesta dal preventivo P0906_V2 (TECNIX SA). FONT — li prescrive il Brand Manual Tomasella, cap. 4, pagina 36, "Tipografia alternativa (uso rivenditori / office / web)": display : Noto Serif Display (sostituto ufficiale di Billmake) testo : Martel Sans (sostituto ufficiale di Proxima Nova) Non sono una nostra scelta estetica: sono i due font che la casa madre impone alla rete rivenditori per il web, entrambi Google Fonts. Billmake e Proxima Nova (kit Adobe rxr1hhi) richiedono licenze commerciali riservate alle comunicazioni dirette del brand e non vanno usati. Fino al 28/08 c'erano Cormorant Garamond e Onest, dedotti dallo stack del sito della casa madre. Erano una deduzione ragionevole ma non il documento: il Brand Manual, arrivato dalla project manager di TIF, dice altro e vince. Attenzione: Martel Sans non ha il peso 500, il piu' vicino sopra e' il 600. ──────────────────────────────────────────────────────────── */ :root { /* ── Colore: base ───────────────────────────────────────── Dal Brand Manual Tomasella, cap. 3 pag. 29-30. Sostituiscono i valori dedotti da tomasella.it: dove manuale e sito divergono, vince il manuale. */ --tom-bianco: #ece8e6; /* primario chiaro — fondo pagina */ --tom-bianco-warm: #ffffff; /* neutro bianco — fasce alternate */ --tom-bianco-2: #ffffff; --tom-bianco-3: #ece8e6; --tom-pure-white: #ffffff; --tom-nero: #3c3c3b; /* primario scuro */ --tom-nero-2: #3c3c3b; --tom-pure-black: #000000; --tom-grafite: #3c3c3b; --tom-charcoal: #3c3c3b; /* ── Colore: neutri ─────────────────────────────────────── Scala ricavata miscelando il primario scuro sul primario chiaro, cosi' i filetti e i testi secondari restano in famiglia col fondo nuovo invece di essere quelli tarati sul vecchio. */ --tom-grigio-100: #d7d3d2; /* filetti, divisori — 12% */ --tom-grigio-200: #c9c6c4; /* bordi dei moduli — 20% */ --tom-grigio-300: #aeacaa; /* disabilitato — 35% */ /* I due grigi di testo stanno al 75% e all'85% e non piu' bassi: sotto quella soglia il contrasto sul fondo chiaro scende oltre 4,5:1 e occhielli ed estratti diventano illeggibili. */ --tom-grigio-400: #686766; /* testo secondario — 4,64:1 */ --tom-grigio-500: #565655; /* testo terziario — 6,04:1 */ --tom-grigio-warm: #d7d3d2; /* ── Colore: accento ────────────────────────────────────── Manuale pag. 30-31: accento commerciale, mai oltre il 10-15% della superficie, ammesso su badge, CTA ed evidenziazioni. ⚠️ NON usarlo come colore di testo: su fondo chiaro sta a 2,09:1, sotto la soglia di leggibilita'. Va sui filetti e sui contorni, non sulle lettere. */ --tom-arancio: #ff7e00; /* ── Colore: veli e overlay ───────────────────────────────── */ --tom-veil-10: rgba(26, 26, 26, 0.10); --tom-veil-20: rgba(26, 26, 26, 0.20); --tom-veil-40: rgba(26, 26, 26, 0.40); --tom-veil-50: rgba(0, 0, 0, 0.50); --tom-bianco-50: rgba(244, 245, 242, 0.50); /* ── Superfici semantiche ─────────────────────────────────── */ --tom-bg: var(--tom-bianco); --tom-bg-elev: var(--tom-pure-white); --tom-bg-dark: var(--tom-nero-2); --tom-fg: var(--tom-nero); --tom-fg-muted: var(--tom-grigio-400); --tom-fg-on-dark: var(--tom-bianco); --tom-border: var(--tom-grigio-100); /* ── Tipografia: famiglie ─────────────────────────────────── */ --tom-font-display: "Noto Serif Display", "Times New Roman", serif; --tom-font-sans: "Martel Sans", -apple-system, "Helvetica Neue", system-ui, sans-serif; --tom-font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* ── Tipografia: scala display ────────────────────────────── */ --tom-h-hero: clamp(64px, 9vw, 132px); --tom-h-1: clamp(48px, 6vw, 72px); --tom-h-2: clamp(24px, calc(12px + 2.5vw), 48px); --tom-h-3: clamp(22px, calc(20px + 0.83vw), 32px); --tom-h-display-tracking: -0.03em; /* ── Tipografia: scala sans ───────────────────────────────── */ --tom-t-eyebrow: 14px; --tom-t-body-sm: 14px; --tom-t-body: 16px; --tom-t-body-lg: 20px; --tom-t-lead: clamp(18px, calc(14px + 0.8vw), 24px); --tom-t-section: clamp(24px, calc(8px + 3.33vw), 56px); --tom-line-tight: 0.90; --tom-line-snug: 1.10; --tom-line-base: 1.35; --tom-line-loose: 1.55; /* ── Spaziatura (multipli di 8) ───────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-28: 112px; --sp-38: 152px; --sp-48: 192px; /* ── Raggi ────────────────────────────────────────────────── */ /* La casa madre arrotonda solo i comandi: bottoni e riquadri CTA a 16px, pillole a 100px. Immagini e campi dei moduli restano squadrati (nel loro global.css i campi hanno border-radius: 0 esplicito). --r-sm e --r-md restano definiti per compatibilita' ma non si usano: se serve un raggio su una superficie, prima verificare che ce l'abbia anche tomasella.it. */ --r-sm: 2px; --r-btn: 16px; --r-md: 16px; --r-pill: 100px; --r-full: 9999px; /* ── Bordi ────────────────────────────────────────────────── */ --bd-hair: 1px solid var(--tom-grigio-100); --bd-rule: 1px solid var(--tom-nero); --bd-on-dark: 1px solid rgba(244, 245, 242, 0.18); /* ── Ombre (Tomasella ne usa pochissime) ──────────────────── */ --sh-card: 0 1px 2px rgba(26, 26, 26, 0.04); --sh-elev: 0 12px 32px rgba(26, 26, 26, 0.08); /* ── Movimento ────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 160ms; --t-base: 280ms; --t-slow: 520ms; /* ── Layout ───────────────────────────────────────────────── */ --tom-page-max: 1440px; --tom-wrap: 1680px; --tom-gutter: 32px; --tom-pad-x: clamp(20px, calc(-32px + 13.33vw), 160px); --tom-hero-text: clamp(300px, 32vw, 480px); --tom-hero-blurb: clamp(320px, 51vw, 736px); --tom-nav-h: 72px; }