/* ============================================================================ BBR — Design tokens v2 ---------------------------------------------------------------------------- Sistema di base. Tutto qui sotto è una variabile CSS riusabile. Niente valori hardcoded altrove: se serve un colore/spazio/radius che non esiste qui, prima lo aggiungiamo qui, poi lo usiamo. Convenzioni: - --bbr-ink-N → scala neutri (0 = più scuro, 9 = più chiaro) - --bbr-bg-* → colori di sfondo per layer (app, surface, sunken, elev) - --bbr-fg-* → colori di testo (primary, secondary, muted, on-accent…) - --bbr-bd-* → bordi (default, strong, focus) - --bbr-accent → primario (CTA, link). Cambia con [data-accent="..."] - --bbr-{green|amber|red} → semantici - --space-N, --text-*, --radius-*, --shadow-*, --dur-*, --ease-* ========================================================================== */ /* ====== NEUTRI (oklch, cool-neutral leggermente bluato) =================== */ :root { --bbr-ink-0: oklch(15% 0.008 260); /* nero quasi puro, testo principale */ --bbr-ink-1: oklch(22% 0.008 260); /* heading scuro */ --bbr-ink-2: oklch(34% 0.008 260); /* testo secondario */ --bbr-ink-3: oklch(48% 0.008 260); /* testo terziario, label */ --bbr-ink-4: oklch(64% 0.008 260); /* placeholder, icone soft */ --bbr-ink-5: oklch(82% 0.006 260); /* bordi forti, divisori */ --bbr-ink-6: oklch(90% 0.005 260); /* bordi sottili default */ --bbr-ink-7: oklch(95% 0.004 260); /* chip soft, hover */ --bbr-ink-8: oklch(97.5% 0.003 260); /* page bg */ --bbr-ink-9: oklch(100% 0 0); /* superfici card */ /* ====== SEMANTIC ALIASES (light theme defaults) ====== */ --bbr-bg-app: var(--bbr-ink-8); /* sfondo pagina */ --bbr-bg-surface: var(--bbr-ink-9); /* card, modali */ --bbr-bg-sunken: var(--bbr-ink-7); /* aree inset, codice, hover-soft */ --bbr-bg-elev: var(--bbr-ink-9); /* popover, dropdown (alza con shadow) */ --bbr-bg-overlay: oklch(15% 0.008 260 / 0.45); /* backdrop modale */ --bbr-fg-primary: var(--bbr-ink-0); --bbr-fg-secondary: var(--bbr-ink-2); --bbr-fg-muted: var(--bbr-ink-3); --bbr-fg-soft: var(--bbr-ink-4); --bbr-fg-on-accent: oklch(99% 0 0); --bbr-bd-default: var(--bbr-ink-6); --bbr-bd-strong: var(--bbr-ink-5); --bbr-bd-soft: color-mix(in oklch, var(--bbr-ink-6) 60%, transparent); --bbr-bd-focus: var(--bbr-accent); --bbr-ring: color-mix(in oklch, var(--bbr-accent) 30%, transparent); /* ====== ACCENT (default: Bosco — verde sobrio, hospitality) ====== */ --bbr-accent: oklch(42% 0.085 158); --bbr-accent-hover: oklch(36% 0.09 158); --bbr-accent-active: oklch(30% 0.09 158); --bbr-accent-soft: color-mix(in oklch, oklch(42% 0.085 158) 14%, transparent); --bbr-accent-soft-fg: oklch(32% 0.09 158); /* ====== SEMANTIC COLORS ====== */ --bbr-green: oklch(54% 0.13 152); --bbr-green-soft: color-mix(in oklch, oklch(54% 0.13 152) 12%, transparent); --bbr-green-fg: oklch(38% 0.13 152); --bbr-amber: oklch(70% 0.14 70); --bbr-amber-soft: color-mix(in oklch, oklch(70% 0.14 70) 18%, transparent); --bbr-amber-fg: oklch(42% 0.12 60); --bbr-red: oklch(56% 0.20 25); --bbr-red-soft: color-mix(in oklch, oklch(56% 0.20 25) 12%, transparent); --bbr-red-fg: oklch(42% 0.18 25); /* Banner "Stai lavorando come" — accent warm, distintivo ma non urlato */ --bbr-context: oklch(55% 0.14 50); --bbr-context-soft: color-mix(in oklch, oklch(55% 0.14 50) 14%, transparent); --bbr-context-bd: color-mix(in oklch, oklch(55% 0.14 50) 35%, transparent); /* ====== TIPOGRAFIA ====== */ /* Pairing: Instrument Serif (display) + Inter (UI/body, come design system Lenzuoli) - Instrument Serif: contemporanea, leggermente editoriale, ospitalità - Inter: neutra e stretta, numeri tabulari: il font della UI dal 2026-09-04 */ --bbr-font-display: 'Instrument Serif', 'Source Serif 4', Georgia, 'Times New Roman', serif; --bbr-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --bbr-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Scala tipografica — 7 livelli, 4px-grid friendly */ --text-xs: 11.5px; /* meta, label uppercase */ --text-sm: 13px; /* secondario, label form, badge */ --text-base: 14px; /* body default (UI) */ --text-md: 15px; /* body alt / paragrafi lunghi */ --text-lg: 18px; /* sottotitolo, card title piccolo */ --text-xl: 22px; /* card title, section heading */ --text-2xl: 28px; /* H2 (serif) */ --text-3xl: 36px; /* H1 page (serif) */ --text-4xl: 48px; /* display large (serif) */ /* Line heights */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.5; --lh-loose: 1.65; /* Letter spacing */ --tracking-tight: -0.012em; --tracking-base: 0em; --tracking-wide: 0.04em; /* label uppercase */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ====== SPAZI — 15 valori, nomi proporzionali come Lenzuoli condivisi ====== --space-N vale N/100 × 4px (200 = 8px, 800 = 32px): il nome dice il valore. Ogni padding/margin/gap del guscio passa da qui, mai in px scritti a mano: scripts/test-spacing-scale.php lo verifica. Fuori scala (10, 14, 18px…) non si aggiunge: si sceglie il vicino. */ --space-0: 0; --space-025: 1px; /* bordi hairline */ --space-050: 2px; --space-100: 4px; /* gap icona-testo nei badge */ --space-150: 6px; /* padding verticale celle tabella */ --space-200: 8px; /* gap icona-label, gap fra bottoni */ --space-300: 12px; /* padding orizzontale celle tabella */ --space-400: 16px; /* padding interno standard di una card */ --space-500: 20px; --space-600: 24px; /* gap verticale fra sezioni impilate */ --space-800: 32px; /* colonna principale ↔ colonna laterale */ --space-1000: 40px; --space-1200: 48px; /* respiro fra blocchi */ --space-1600: 64px; --space-2000: 80px; --space-2400: 96px; /* ====== RADIUS — 4 livelli + full ====== */ --radius-xs: 4px; /* checkbox, dot, barre sottili */ --radius-sm: 6px; /* chip, badge, pulsanti piccoli */ --radius-md: 8px; /* input, bottoni standard */ --radius-lg: 12px; /* card */ --radius-xl: 16px; /* modali, hero card */ --radius-full: 999px; /* ====== SHADOWS — 3 livelli ====== */ --shadow-sm: 0 1px 2px rgba(15, 18, 30, 0.04), 0 1px 1px rgba(15, 18, 30, 0.04); --shadow-md: 0 4px 12px rgba(15, 18, 30, 0.06), 0 1px 3px rgba(15, 18, 30, 0.05); --shadow-lg: 0 14px 36px rgba(15, 18, 30, 0.12), 0 4px 10px rgba(15, 18, 30, 0.06); /* Focus ring (riusabile come box-shadow su :focus-visible) */ --shadow-focus: 0 0 0 3px var(--bbr-ring); /* ====== MOTION ====== */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ====== LAYOUT ====== */ --sidebar-w: 232px; --sidebar-w-mini: 60px; --header-h: 56px; --banner-h: 48px; --settings-max: 1000px; /* colonna delle Impostazioni; tutto il resto è a tutta larghezza */ --tap-target: 40px; --page-title-size: 24px; --icon-inline: 16px; --icon-action: 20px; --icon-state: 24px; } /* ============================================================================ ACCENT VARIANTS — switch con [data-accent="indigo"|"ink"] sul (Bosco è il default e non richiede attributo) ========================================================================== */ [data-accent="bosco"] { /* Default — esplicito per coerenza */ --bbr-accent: oklch(42% 0.085 158); --bbr-accent-hover: oklch(36% 0.09 158); --bbr-accent-active: oklch(30% 0.09 158); --bbr-accent-soft: color-mix(in oklch, oklch(42% 0.085 158) 14%, transparent); --bbr-accent-soft-fg: oklch(32% 0.09 158); --bbr-ring: color-mix(in oklch, oklch(42% 0.085 158) 30%, transparent); } [data-accent="indigo"] { /* Alternativa Stripe-like: blu profondo, B2B fintech */ --bbr-accent: oklch(48% 0.16 265); --bbr-accent-hover: oklch(42% 0.17 265); --bbr-accent-active: oklch(36% 0.17 265); --bbr-accent-soft: color-mix(in oklch, oklch(48% 0.16 265) 12%, transparent); --bbr-accent-soft-fg: oklch(38% 0.18 265); --bbr-ring: color-mix(in oklch, oklch(48% 0.16 265) 30%, transparent); } [data-accent="ink"] { /* Linear/Vercel-like: l'accent È il nero. Massima sobrietà. */ --bbr-accent: oklch(22% 0.01 265); --bbr-accent-hover: oklch(15% 0.01 265); --bbr-accent-active: oklch(10% 0.01 265); --bbr-accent-soft: color-mix(in oklch, oklch(22% 0.01 265) 8%, transparent); --bbr-accent-soft-fg: oklch(22% 0.01 265); --bbr-ring: color-mix(in oklch, oklch(22% 0.01 265) 22%, transparent); } /* ============================================================================ DARK MODE — swap dei soli alias semantici Strategia: invertiamo la scala "ink" e ridefiniamo gli alias. I componenti non sanno della differenza: usano sempre gli alias. ========================================================================== */ [data-theme="dark"] { --bbr-ink-0: oklch(98% 0.003 260); /* testo primario su dark */ --bbr-ink-1: oklch(92% 0.005 260); --bbr-ink-2: oklch(80% 0.006 260); --bbr-ink-3: oklch(66% 0.008 260); /* terziario */ --bbr-ink-4: oklch(52% 0.01 260); --bbr-ink-5: oklch(36% 0.012 260); /* bordi forti */ --bbr-ink-6: oklch(28% 0.01 260); /* bordi default */ --bbr-ink-7: oklch(22% 0.008 260); /* hover-soft, chip */ --bbr-ink-8: oklch(15% 0.008 260); /* page bg */ --bbr-ink-9: oklch(18.5% 0.008 260); /* surface (card) — leggermente più chiaro del bg */ --bbr-bg-app: var(--bbr-ink-8); --bbr-bg-surface: var(--bbr-ink-9); --bbr-bg-sunken: oklch(13% 0.008 260); --bbr-bg-elev: oklch(22% 0.01 260); --bbr-bg-overlay: oklch(8% 0.005 260 / 0.65); --bbr-fg-primary: var(--bbr-ink-0); --bbr-fg-secondary: var(--bbr-ink-2); --bbr-fg-muted: var(--bbr-ink-3); --bbr-fg-soft: var(--bbr-ink-4); --bbr-bd-default: var(--bbr-ink-6); --bbr-bd-strong: var(--bbr-ink-5); --bbr-bd-soft: color-mix(in oklch, var(--bbr-ink-6) 70%, transparent); /* Accent default Bosco in dark: alziamo lievemente la luminosità per contrasto */ --bbr-accent: oklch(60% 0.10 158); --bbr-accent-hover: oklch(66% 0.10 158); --bbr-accent-active: oklch(54% 0.10 158); --bbr-accent-soft: color-mix(in oklch, oklch(60% 0.10 158) 20%, transparent); --bbr-accent-soft-fg: oklch(78% 0.10 158); --bbr-green: oklch(70% 0.14 152); --bbr-green-soft: color-mix(in oklch, oklch(70% 0.14 152) 18%, transparent); --bbr-green-fg: oklch(82% 0.13 152); --bbr-amber: oklch(78% 0.14 75); --bbr-amber-soft: color-mix(in oklch, oklch(78% 0.14 75) 18%, transparent); --bbr-amber-fg: oklch(85% 0.13 75); --bbr-red: oklch(68% 0.19 25); --bbr-red-soft: color-mix(in oklch, oklch(68% 0.19 25) 18%, transparent); --bbr-red-fg: oklch(80% 0.16 25); --bbr-context: oklch(70% 0.14 55); --bbr-context-soft: color-mix(in oklch, oklch(70% 0.14 55) 20%, transparent); --bbr-context-bd: color-mix(in oklch, oklch(70% 0.14 55) 45%, transparent); /* Ombre più morbide su dark (meno contrasto, fanno fatica a leggersi) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35); } [data-theme="dark"][data-accent="bosco"] { /* Default Bosco in dark — esplicito */ --bbr-accent: oklch(60% 0.10 158); --bbr-accent-hover: oklch(66% 0.10 158); --bbr-accent-active: oklch(54% 0.10 158); --bbr-accent-soft: color-mix(in oklch, oklch(60% 0.10 158) 20%, transparent); --bbr-accent-soft-fg: oklch(78% 0.10 158); --bbr-ring: color-mix(in oklch, oklch(60% 0.10 158) 35%, transparent); } [data-theme="dark"][data-accent="indigo"] { --bbr-accent: oklch(62% 0.17 265); --bbr-accent-hover: oklch(68% 0.17 265); --bbr-accent-active: oklch(56% 0.17 265); --bbr-accent-soft: color-mix(in oklch, oklch(62% 0.17 265) 18%, transparent); --bbr-accent-soft-fg: oklch(78% 0.13 265); --bbr-ring: color-mix(in oklch, oklch(62% 0.17 265) 30%, transparent); } [data-theme="dark"][data-accent="ink"] { /* In dark, "ink" diventa bianco. Pulito. */ --bbr-accent: oklch(95% 0.005 260); --bbr-accent-hover: oklch(100% 0 0); --bbr-accent-active: oklch(85% 0.005 260); --bbr-accent-soft: color-mix(in oklch, oklch(95% 0.005 260) 10%, transparent); --bbr-accent-soft-fg: oklch(95% 0.005 260); --bbr-fg-on-accent: oklch(15% 0.008 260); --bbr-ring: color-mix(in oklch, oklch(95% 0.005 260) 25%, transparent); } /* ============================================================================ GLOBAL RESET LITE — solo l'indispensabile ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--bbr-font-sans); font-size: var(--text-base); line-height: var(--lh-base); color: var(--bbr-fg-primary); background: var(--bbr-bg-app); font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--bbr-accent-soft); color: var(--bbr-fg-primary); } /* Focus visibile, mai outline browser default */ :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* Reduce motion safety */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }