/* ============================================================
* ZI-CHAT — Design Tokens Globali (dark / light theme)
* ------------------------------------------------------------
* Single source of truth per i colori del sito (pivot pro 2026).
*
* USO :
* 1. Caricare QUESTO file PRIMA di tutti gli altri CSS.
* Es. nel header.php :
*
*
* (...)
* 2. Nei CSS delle pagine, usare SEMPRE var(--token, fallback).
* Evitare colori hardcoded come #141414, #f5f5f5.
* 3. Sul attivo theme via data-attribute :
* (default)
* (chiaro)
* Il JS in header.php fa boot + toggle + localStorage + prefers-color-scheme.
*
* Sia variabili moderne (--zi-*) sia legacy (--gold, --text, --panel-bg)
* sono ridefinite per garantire backward compatibility con style.css.
* ============================================================ */
/* ============================================================
DARK THEME — default
============================================================ */
:root,
:root[data-theme="dark"] {
/* Surface */
--zi-bg-main: #050509;
--zi-bg-panel: #141414;
--zi-bg-soft: #171717;
--zi-bg-elevated: #1c1c1f;
--zi-bg-overlay: rgba(10, 11, 16, 0.88);
/* Text */
--zi-text: #f5f5f5;
--zi-text-main: #f9fafb;
--zi-text-strong: #ffffff;
--zi-muted: #a0a0a0;
--zi-muted-strong: #cfd2d6;
--zi-muted-soft: #8b8e93;
/* Brand semantici — dark theme = ORO PREMIUM, light theme = TRUST BLUE.
Usa SEMPRE --zi-brand* nelle pagine nuove. --zi-gold* restano alias legacy. */
--zi-brand: #d4af37; /* primary brand color (gold) */
--zi-brand-strong: #a08529; /* hover/active state (gold-dark) */
--zi-brand-soft: #f4e4a1; /* light tint / glow (gold-light) */
--zi-brand-on-bg: #d4af37; /* brand color when used as text on bg */
--zi-on-brand: #050505; /* text on solid brand bg (dark text on gold) */
--zi-focus-ring: rgba(212, 175, 55, 0.35);
/* Brand tint scale (alpha levels per overlay/border/badge) */
--zi-brand-tint-low: rgba(212, 175, 55, 0.08); /* background subtle */
--zi-brand-tint-mid: rgba(212, 175, 55, 0.28); /* border default */
--zi-brand-tint-hi: rgba(212, 175, 55, 0.55); /* border hover */
--zi-brand-tint-muted: rgba(212, 175, 55, 0.22); /* icon/quote muted */
/* Legacy gold aliases (backward compat) */
--zi-gold: var(--zi-brand);
--zi-gold-light: var(--zi-brand-soft);
--zi-gold-dark: var(--zi-brand-strong);
--zi-gold-on-bg: var(--zi-brand-on-bg);
/* Semantic */
--zi-cyan: #5cd1ff;
--zi-green: #3ddc97;
--zi-red: #ff6b6b;
--zi-orange: #ffa94d;
--zi-violet: #b794f4;
/* Border / stroke */
--zi-border-soft: rgba(212, 175, 55, 0.28);
--zi-border-faint: rgba(255, 255, 255, 0.06);
--zi-border-mid: rgba(255, 255, 255, 0.12);
--zi-divider: rgba(212, 175, 55, 0.18);
/* Shadow */
--zi-shadow-card: 0 20px 50px rgba(0, 0, 0, 0.75);
--zi-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.4);
--zi-shadow-elevated:0 24px 60px rgba(0, 0, 0, 0.55);
--zi-shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.35);
/* Surface accents */
--zi-accent-soft: rgba(244, 199, 106, 0.22);
--zi-accent-bg: rgba(212, 175, 55, 0.04);
--zi-accent-bg-hover: rgba(212, 175, 55, 0.08);
/* Component-level tokens (pivot pro 2026) */
--zi-media-bg: #0a0a0a; /* video/img placeholder */
--zi-card-grad-from: rgba(15, 23, 42, 0.98); /* feature/service card gradient start */
--zi-card-grad-to: rgba(15, 23, 42, 0.86); /* feature/service card gradient end */
--zi-card-border: rgba(31, 41, 55, 0.95); /* feature/service card border */
--zi-shadow-card-heavy: 0 22px 60px rgba(0, 0, 0, 0.98),
0 0 26px rgba(15, 23, 42, 0.95);
--zi-shadow-card-hover-heavy: 0 26px 70px rgba(0, 0, 0, 1),
0 0 30px rgba(244, 199, 106, 0.5);
--zi-mock-chrome: linear-gradient(180deg, #161922 0%, #10131a 100%); /* hero mock browser chrome */
--zi-mock-bg: #0c0e14; /* hero mock body */
--zi-step-idle: rgba(255, 255, 255, 0.18); /* animated step dot idle */
--zi-overlay-soft: rgba(0, 0, 0, 0.5); /* button bg over media */
--zi-overlay-strong: rgba(2, 2, 2, 0.92); /* full-screen overlay (timeout, modal) */
--zi-on-gold: var(--zi-on-brand); /* legacy alias */
--zi-text-on-light: #ffffff; /* white text on color blocks (kept fixed) */
--zi-bg-wallpaper: #050509; /* body::before flat dark — no halo */
--zi-glass-bg: rgba(255, 255, 255, 0.1); /* .background-glass header */
--zi-glass-border: rgba(255, 255, 255, 0.1); /* .background-glass border */
--zi-glass-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.1);
/* Radii */
--zi-radius-lg: 20px;
--zi-radius-card: 18px;
--zi-radius-soft: 14px;
--zi-radius-sm: 8px;
--zi-radius-pill: 999px;
/* Animation */
--zi-transition: 0.25s ease-out;
/* ============================================================
[Joker 2026-05-13] PREMIUM FOUNDATION TOKENS
Lezioni Mazzocchi + TimeFrame (vedi pattern bibliografia #6 #7)
============================================================ */
/* === TEXT HIERARCHY ALPHA-BASED (TimeFrame pattern, 4 livelli) === */
--zi-text-soft: rgba(255, 255, 255, 0.85); /* body principal */
--zi-text-mute: rgba(255, 255, 255, 0.60); /* paragrafi secondari */
--zi-text-faint: rgba(255, 255, 255, 0.40); /* captions, hints */
/* --zi-text-strong già definito sopra a #ffffff (100%) */
/* === DARK CARD ELEVATION (TimeFrame stratificate, 3 livelli) === */
--zi-elev-1: #13131c; /* card resting */
--zi-elev-2: #1c1c28; /* card hover/lifted */
--zi-elev-3: #252533; /* modal, popover, dropdown */
/* === GLASS OVERLAY ALPHA (TimeFrame border/divider) === */
--zi-glass-tint-1: rgba(255, 255, 255, 0.04); /* tint card bg subtle */
--zi-glass-tint-2: rgba(255, 255, 255, 0.08); /* tint hover */
--zi-border-faint-2:rgba(255, 255, 255, 0.12); /* border default su elev */
/* === TYPOGRAPHY SCALE (Mazzocchi enforcement — 8 valori fissi) === */
/* [Sead feedback 2026-05-13] hero uniforme dark + light: niente brutalist editorial.
Pattern Calendly/Stripe: sobrio in entrambi i temi, cambia solo il gradient brand. */
--zi-fs-hero: clamp(38px, 6vh, 64px); /* uniforme dark + light */
--zi-fs-h1: clamp(34px, 5.5vh, 50px);
--zi-fs-h2: clamp(26px, 3.8vh, 34px);
--zi-fs-h3: 20px;
--zi-fs-body-lg: 19px; /* paragrafi hero/lead */
--zi-fs-body: 16px;
--zi-fs-body-sm: 14px;
--zi-fs-meta: 12px; /* uppercase tag, eyebrow */
--zi-heading-mb: 20px; /* Mazzocchi heading margin uniforme */
/* === SECONDARY COOL PASTEL (Mazzocchi 2 pastel pattern) === */
--zi-bg-soft-cool: #171f2e; /* dark cool secondary (vs warm latte) */
/* === PAGE VIGNETTE (TimeFrame bottom canvas frame) === */
--zi-vignette: linear-gradient(transparent 12%, rgba(0, 0, 0, 0.6));
/* === Aliases legacy (backward compatibility con style.css esistente) === */
--bg: var(--zi-bg-main);
--panel: var(--zi-bg-panel);
--panel-bg: rgba(22, 22, 22, .92);
--panel-2: var(--zi-bg-soft);
--stroke: var(--zi-border-soft);
--text: var(--zi-text);
--text-main: var(--zi-text-main);
--muted: var(--zi-muted);
--gold: var(--zi-gold);
--gold-bright: var(--zi-gold-light);
--gold-dark: var(--zi-gold-dark);
--cyan: var(--zi-cyan);
--green: var(--zi-green);
--red: var(--zi-red);
--orange: var(--zi-orange);
--violet: var(--zi-violet);
--radius: var(--zi-radius-soft);
--shadow-card: var(--zi-shadow-card);
/* Color-scheme browser hint (form controls, scrollbars) */
color-scheme: dark;
}
/* ============================================================
LIGHT THEME — Calendly/Linear inspired (off-white, eye comfort)
============================================================ */
:root[data-theme="light"] {
/* ============================================================
LIGHT THEME — Palette "B2B Trust & Slate"
Riferimenti: Calendly, Stripe, Pennylane, Doctolib, Salesforce
Il brand passa da ORO → TRUST BLUE per allineamento B2B SaaS
============================================================ */
/* Surface — bg pagina "latte sobrio" + card pure white per highlight */
--zi-bg-main: #fefae0; /* [Sead 2026-05-13] cream warm soft (era #f5f2eb) — più luminoso, latte chiaro caldo */
--zi-bg-panel: #ffffff; /* card surface — PURE WHITE per stand-out vs bg latte */
--zi-bg-soft: #ece7dc; /* secondary warm latte (footer, sezioni separate) */
--zi-bg-elevated: #ffffff;
--zi-bg-overlay: rgba(255, 255, 255, 0.95);
/* Text — nero elegante neutro, non Slate bluish */
--zi-text: #1a1a1a; /* nero elegante leggibile, non puro-black */
--zi-text-main: #0a0a0a; /* headings near-black */
--zi-text-strong: #000000; /* strong, raro */
--zi-muted: #475569; /* slate-600 — secondary, MAI sotto AA */
--zi-muted-strong: #334155; /* slate-700 — più scuro per leggibilità */
--zi-muted-soft: #64748b; /* slate-500 — captions discreti ma leggibili */
/* Brand — TRUST BLUE (in light il brand sostituisce l'oro) */
--zi-brand: #1d4ed8; /* Trust Blue — primary brand */
--zi-brand-strong: #1e40af; /* Trust Blue dark — hover, focus */
--zi-brand-soft: #dbeafe; /* Trust Blue tint — accent bg, badge */
--zi-brand-on-bg: #1d4ed8; /* brand color usato come testo */
--zi-on-brand: #ffffff; /* testo bianco su Trust Blue CTA */
--zi-focus-ring: rgba(29, 78, 216, 0.35);
/* Brand tint scale (Trust Blue alpha) */
--zi-brand-tint-low: rgba(29, 78, 216, 0.06); /* background subtle */
--zi-brand-tint-mid: rgba(29, 78, 216, 0.25); /* border default */
--zi-brand-tint-hi: rgba(29, 78, 216, 0.50); /* border hover */
--zi-brand-tint-muted: rgba(29, 78, 216, 0.18); /* icon/quote muted */
/* Legacy gold aliases (in light = blue, per backward compat) */
--zi-gold: var(--zi-brand); /* #1d4ed8 */
--zi-gold-light: var(--zi-brand-soft); /* #dbeafe */
--zi-gold-dark: var(--zi-brand-strong); /* #1e40af */
--zi-gold-on-bg: var(--zi-brand-on-bg); /* #1d4ed8 */
/* Action — CTA principal (leggermente più saturo del brand testuale, pattern Stripe) */
--zi-action: #2563eb; /* Action Cobalt — bottoni primary */
--zi-action-hover: #1d4ed8; /* hover = trust-blue */
/* Semantic — versioni più sature/scure per WCAG AA */
--zi-cyan: #0b5d8a;
--zi-green: #1e7a4d;
--zi-red: #b91c1c;
--zi-orange: #a35a00;
--zi-violet: #5b3aa1;
/* Border / stroke — Slate Border */
--zi-border-soft: #cbd5e1; /* Slate Border — default */
--zi-border-faint: rgba(15, 23, 42, 0.05);
--zi-border-mid: rgba(15, 23, 42, 0.18);
--zi-divider: rgba(15, 23, 42, 0.08);
/* Shadow — più sottili, no pure black ombre */
--zi-shadow-card: 0 12px 32px rgba(15, 23, 42, 0.08);
--zi-shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.12);
--zi-shadow-elevated:0 24px 60px rgba(15, 23, 42, 0.10);
--zi-shadow-soft: 0 2px 6px rgba(15, 23, 42, 0.05);
/* Surface accents (Trust Blue tints) */
--zi-accent-soft: rgba(29, 78, 216, 0.18);
--zi-accent-bg: rgba(29, 78, 216, 0.05);
--zi-accent-bg-hover: rgba(29, 78, 216, 0.10);
/* Component-level tokens (pivot pro 2026 — light overrides) */
--zi-media-bg: var(--zi-bg-soft); /* video/img placeholder soft */
--zi-card-grad-from: var(--zi-bg-panel); /* card gradient start (white) */
--zi-card-grad-to: var(--zi-bg-soft); /* card gradient end (off-white) */
--zi-card-border: var(--zi-border-soft);
--zi-shadow-card-heavy: var(--zi-shadow-card),
0 0 14px rgba(15, 23, 42, 0.04);
--zi-shadow-card-hover-heavy: var(--zi-shadow-hover),
0 0 18px var(--zi-brand-tint-muted);
--zi-mock-chrome: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
--zi-mock-bg: var(--zi-bg-panel);
--zi-step-idle: rgba(15, 23, 42, 0.18);
--zi-overlay-soft: rgba(15, 23, 42, 0.10);
--zi-overlay-strong: rgba(250, 251, 252, 0.92);
--zi-on-gold: var(--zi-on-brand); /* legacy alias, in light = white */
--zi-text-on-light: #ffffff;
--zi-bg-wallpaper: var(--zi-bg-main); /* body::before flat latte — no halo */
--zi-glass-bg: rgba(255, 255, 255, 0.65);
--zi-glass-border: rgba(15, 23, 42, 0.08);
--zi-glass-shadow: 0 2px 10px rgba(15, 23, 42, 0.06), inset 0 0 10px rgba(255, 255, 255, 0.4);
/* ============================================================
[Joker 2026-05-13] PREMIUM FOUNDATION TOKENS — LIGHT
Mazzocchi pattern: 2 pastel (warm + cool), white card lifted
============================================================ */
/* === TEXT HIERARCHY ALPHA-BASED su slate-deep === */
--zi-text-soft: rgba(15, 23, 42, 0.85); /* body principal su latte */
--zi-text-mute: rgba(15, 23, 42, 0.60); /* paragrafi secondari */
--zi-text-faint: rgba(15, 23, 42, 0.40); /* captions, hints */
/* --zi-text-strong già definito sopra a #000000 */
/* === LIGHT CARD ELEVATION (Mazzocchi pastel-on-pastel) === */
--zi-elev-1: var(--zi-bg-soft); /* card resting = warm latte */
--zi-elev-2: #ffffff; /* card hover/lifted = white stand-out */
--zi-elev-3: #ffffff; /* modal/popover = white + shadow */
/* === GLASS OVERLAY ALPHA su slate (light) === */
--zi-glass-tint-1: rgba(15, 23, 42, 0.04);
--zi-glass-tint-2: rgba(15, 23, 42, 0.08);
--zi-border-faint-2:rgba(15, 23, 42, 0.10);
/* === TYPOGRAPHY SCALE (light = no brutalist, hero più sobrio) === */
--zi-fs-hero: clamp(38px, 6vh, 64px); /* light hero standard, non-uppercase */
--zi-fs-h1: clamp(34px, 5.5vh, 50px);
--zi-fs-h2: clamp(26px, 3.8vh, 34px);
--zi-fs-h3: 20px;
--zi-fs-body-lg: 19px;
--zi-fs-body: 16px;
--zi-fs-body-sm: 14px;
--zi-fs-meta: 12px;
--zi-heading-mb: 20px;
/* === SECONDARY COOL PASTEL (Mazzocchi alternance warm/cool) === */
--zi-bg-soft-cool: #e6efff; /* ice blue pastel (per sezioni tech/AI) */
/* === PAGE VIGNETTE OFF in light theme === */
--zi-vignette: none;
/* === Aliases legacy === */
--bg: var(--zi-bg-main);
--panel: var(--zi-bg-panel);
--panel-bg: rgba(255, 255, 255, .96);
--panel-2: var(--zi-bg-soft);
--stroke: var(--zi-border-soft);
--text: var(--zi-text);
--text-main: var(--zi-text-main);
--muted: var(--zi-muted);
--gold: var(--zi-gold);
--gold-bright: var(--zi-gold-light);
--gold-dark: var(--zi-gold-dark);
--cyan: var(--zi-cyan);
--green: var(--zi-green);
--red: var(--zi-red);
--orange: var(--zi-orange);
--violet: var(--zi-violet);
color-scheme: light;
}
/* ============================================================
BODY base + transitions sul theme switch
============================================================ */
html, body {
background: var(--zi-bg-main);
color: var(--zi-text);
transition: background-color 0.28s ease, color 0.28s ease;
}
/* Elementi che richiedono transition esplicita sul theme swap */
.zi-themed-surface {
background: var(--zi-bg-panel);
border-color: var(--zi-border-soft);
color: var(--zi-text);
transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}
/* ============================================================
THEME TOGGLE BUTTON (top-right, fixed)
============================================================ */
.zi-theme-toggle {
position: fixed;
top: 14px;
right: 14px;
z-index: 9998;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--zi-bg-panel);
border: 1px solid var(--zi-border-soft);
color: var(--zi-gold-on-bg);
cursor: pointer;
box-shadow: var(--zi-shadow-soft);
transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
-webkit-tap-highlight-color: transparent;
}
.zi-theme-toggle:hover {
background: var(--zi-accent-bg-hover);
border-color: var(--zi-gold);
transform: rotate(15deg);
}
.zi-theme-toggle:focus-visible {
outline: 2px solid var(--zi-gold);
outline-offset: 2px;
}
/* SVG icon visibility based on theme */
.zi-theme-toggle .zi-icon-sun { display: none; }
.zi-theme-toggle .zi-icon-moon { display: inline; }
:root[data-theme="light"] .zi-theme-toggle .zi-icon-sun { display: inline; }
:root[data-theme="light"] .zi-theme-toggle .zi-icon-moon { display: none; }
@media print {
.zi-theme-toggle { display: none !important; }
}
/* ============================================================
SCROLLBAR — aware del theme (Chromium/Firefox)
============================================================ */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--zi-border-mid);
border-radius: 5px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--zi-muted); }
* { scrollbar-color: var(--zi-border-mid) transparent; scrollbar-width: thin; }
/* ============================================================
PREFERS-COLOR-SCHEME — auto detect quando nessun data-theme è impostato
(sovrascritto se il JS imposta data-theme da localStorage)
============================================================ */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
/* Repete la palette light per chi non ha mai cliccato il toggle */
--zi-bg-main: #fafbfc;
--zi-bg-panel: #ffffff;
--zi-bg-soft: #f4f6f9;
--zi-text: #1a1d23;
--zi-text-main: #0c0e14;
--zi-muted: #6b7280;
--zi-gold-dark: #8a6f15;
--zi-border-soft: rgba(15, 23, 42, 0.10);
--zi-shadow-card: 0 12px 32px rgba(15, 23, 42, 0.08);
--bg: var(--zi-bg-main);
--panel: var(--zi-bg-panel);
--text: var(--zi-text);
--muted: var(--zi-muted);
--stroke: var(--zi-border-soft);
color-scheme: light;
}
}