/* ═══════════════════════════════════════════════════════════════ TOKENS v2 — ModelVault Design System ElevenLabs × Claude hybrid: dark, technical, editorial, trustworthy ═══════════════════════════════════════════════════════════════ */ :root { /* ── Core ── */ --black: #050507; --black-soft: #0a0a0c; --white: #ffffff; /* ── Neutral (zinc-based, warm undertones) ── */ --n-50: #fafafa; --n-100: #f4f4f5; --n-200: #e4e4e7; --n-300: #d4d4d8; --n-400: #a1a1aa; --n-500: #71717a; --n-600: #52525b; --n-700: #3f3f46; --n-800: #27272a; --n-900: #18181b; --n-950: #09090b; /* ── Brand Accents ── */ --cyan: #06b6d4; --cyan-600: #0891b2; --cyan-700: #0e7490; --cyan-glow: rgba(6,182,212,.35); --cyan-haze: rgba(6,182,212,.08); --cyan-ring: rgba(6,182,212,.4); --violet: #3b82f6; --violet-600: #2563eb; --violet-glow: rgba(59,130,246,.35); --violet-haze: rgba(59,130,246,.08); /* ── Semantic ── */ --green: #16a34a; --green-haze: rgba(22,163,74,.1); --green-ring: rgba(22,163,74,.3); --red: #dc2626; --red-haze: rgba(220,38,38,.1); --red-ring: rgba(220,38,38,.3); --amber: #d97706; --amber-haze: rgba(217,119,6,.1); /* ── Typography ── */ --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Menlo, monospace; --fs-xs: 0.6875rem; /* 11px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.9375rem; /* 15px */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.875rem; /* 30px */ --fs-4xl: 2.5rem; /* 40px */ --fs-5xl: 3rem; /* 48px */ --fs-6xl: clamp(2.75rem, 5vw, 4.25rem); --lh-tight: 1.1; --lh-snug: 1.35; --lh-normal: 1.6; --lh-relaxed: 1.75; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Spacing Scale ── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ── Radius ── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-full: 9999px; /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,.08); --shadow-sm: 0 2px 8px rgba(0,0,0,.1); --shadow-md: 0 8px 24px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.08); --shadow-lg: 0 20px 48px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.1); --shadow-xl: 0 32px 80px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.15); --shadow-glow-cyan: 0 0 60px -12px var(--cyan-glow); --shadow-glow-violet: 0 0 60px -12px var(--violet-glow); /* ── Borders ── */ --border-light: 1px solid var(--n-200); --border-dark: 1px solid rgba(255,255,255,.06); --border-brand: 1px solid rgba(6,182,212,.25); /* ── Layout ── */ --max-w-prose: 65ch; --max-w-page: 1200px; --max-w-wide: 1400px; --header-h: 72px; /* ── Motion ── */ --ease-out: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 350ms; --dur-slower: 500ms; /* ── Z-index ── */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ── Gradient Presets ── */ --grad-hero: radial-gradient(ellipse at 50% 0%, rgba(6,182,212,.15) 0%, rgba(59,130,246,.08) 40%, transparent 70%), radial-gradient(ellipse at 100% 100%, rgba(59,130,246,.12) 0%, transparent 60%); --grad-hero-subtle: radial-gradient(ellipse at 50% 0%, rgba(6,182,212,.08) 0%, transparent 60%); --grad-text: linear-gradient(135deg, #ffffff 0%, #7dd3fc 50%, #2563eb 100%); --grad-card: linear-gradient(145deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%); --grad-border: linear-gradient(135deg, rgba(6,182,212,.3) 0%, rgba(59,130,246,.15) 100%); --grad-surface: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 100%); --grad-mesh: radial-gradient(circle at 20% 20%, rgba(6,182,212,.12) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(59,130,246,.1) 0%, transparent 50%); /* ── Glassmorphism ── */ --glass-bg: rgba(255,255,255,.03); --glass-border: rgba(255,255,255,.08); --glass-hover: rgba(255,255,255,.06); --glass-strong: rgba(255,255,255,.08); /* ── LEGACY ALIASES (v1 compat: console, vecchie pagine) ── */ --sans: var(--font-sans); --serif: var(--font-serif); --mono: var(--font-mono); --blue: var(--cyan); --blue-d: var(--cyan-700); --blue-h: var(--cyan-haze); --blue-l: rgba(6,182,212,.14); --blue-soft: rgba(6,182,212,.18); --blue-glow: var(--cyan-glow); --on-blue: #04242b; --violet-l: #dbeafe; --green-l: rgba(22,163,74,.14); --red-l: rgba(220,38,38,.14); --amber-l: rgba(217,119,6,.14); --g50: var(--n-50); --g100: var(--n-100); --g200: var(--n-200); --g300: var(--n-300); --g400: var(--n-400); --g500: var(--n-500); --g600: var(--n-600); --g700: var(--n-700); --g800: var(--n-800); --g900: var(--n-900); --g950: var(--n-950); --sh-xs: var(--shadow-xs); --sh-sm: var(--shadow-sm); --sh-md: var(--shadow-md); --sh-lg: var(--shadow-lg); --sh-glow: var(--shadow-glow-cyan); --border: 1px solid rgba(255,255,255,.1); --mw: var(--max-w-page); --mw-lg: var(--max-w-wide); --nav-h: var(--header-h); --ease: var(--ease-out); --dur: var(--dur-fast); --dur-md: var(--dur-base); --dur-lg: var(--dur-slower); --nav-bg: #18181b; --nav-text: rgba(255,255,255,.5); --nav-text-hover: #ffffff; --nav-active: rgba(255,255,255,.1); --nav-hover: rgba(255,255,255,.06); --nav-accent: #38bdf8; } /* ── Color Scheme: Dark (default for public) ── */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } }