/* ============================================
   VENDITORE.AI — Design Tokens
   Palette: VOCAI (B/N + Indaco freddo)
   Base: 8px Stripe scale, Apple fluid type
   ============================================ */

:root {
  /* — Colors (VOCAI) — */
  --c-dark: #0A0A0A;
  --c-surface: #141414;
  --c-surface-2: #1A1A1A;
  --c-teal: #5B5FC7;           /* Indaco freddo — primary accent */
  --c-teal-dim: rgba(91, 95, 199, 0.12);
  --c-teal-glow: rgba(91, 95, 199, 0.25);
  --c-teal-vivid: #7B7FE7;
  --c-coral: #FF6B6B;           /* Accent urgenza — kept */
  --c-coral-dim: rgba(255, 107, 107, 0.12);
  --c-coral-glow: rgba(255, 107, 107, 0.25);
  --c-blue: #5B5FC7;            /* Same as accent for consistency */
  --c-blue-dim: rgba(91, 95, 199, 0.12);
  --c-gold: #FFD700;
  --c-white: #FFFFFF;
  --c-gray: #6B7280;
  --c-gray-dim: rgba(255, 255, 255, 0.06);
  --c-gray-line: rgba(255, 255, 255, 0.08);
  --c-overlay: rgba(10, 10, 10, 0.98);
  --c-cursor: #5B5FC7;
  --c-cursor-fill: rgba(91, 95, 199, 0.12);

  /* — Gradients — */
  --grad-teal: linear-gradient(135deg, #5B5FC7, #7B7FE7);
  --grad-coral: linear-gradient(135deg, #FF6B6B, #FF8E53);
  --grad-hero: radial-gradient(circle at 50% 0%, rgba(91, 95, 199, 0.06) 0%, transparent 70%);
  --grad-cta: linear-gradient(135deg, rgba(91, 95, 199, 0.08), rgba(91, 95, 199, 0.04));

  /* — Typography (VOCAI: Inter Display + JetBrains Mono) — */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Fluid type scale (Apple-style clamp) */
  --fs-hero: clamp(40px, 6vw, 80px);
  --fs-hero-xl: clamp(48px, 8vw, 96px);
  --fs-h1: clamp(36px, 5vw, 64px);
  --fs-h2: clamp(28px, 4vw, 48px);
  --fs-h3: clamp(22px, 3vw, 32px);
  --fs-h4: clamp(18px, 2vw, 24px);
  --fs-body: clamp(15px, 1.2vw, 18px);
  --fs-body-sm: clamp(13px, 1vw, 15px);
  --fs-caption: clamp(11px, 0.8vw, 13px);
  --fs-label: 12px;
  --fs-stat: clamp(36px, 4vw, 56px);

  /* — Spacing (8px base) — */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;

  /* — Layout — */
  --max-w: 1200px;
  --max-w-narrow: 800px;
  --max-w-text: 720px;
  --gutter: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 100px;

  /* — Transitions — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;

  /* — Shadows — */
  --shadow-teal: 0 0 30px var(--c-teal-glow);
  --shadow-teal-lg: 0 0 50px var(--c-teal-glow);
  --shadow-coral: 0 0 30px var(--c-coral-glow);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);

  /* — Z-index — */
  --z-base: 1;
  --z-sticky: 100;
  --z-navbar: 1000;
  --z-mobile-menu: 999;
  --z-modal: 2000;
  --z-chatbot: 3000;
  --z-cursor: 9999;

  /* — Glass — */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: 16px;

  /* — Gradient borders — */
  --grad-border: linear-gradient(135deg, rgba(91, 95, 199, 0.5), rgba(0, 212, 255, 0.3), rgba(91, 95, 199, 0.1));
  --grad-border-gold: linear-gradient(135deg, rgba(255, 215, 0, 0.6), rgba(255, 142, 83, 0.3), rgba(255, 215, 0, 0.1));

  /* — Enhanced shadows — */
  --shadow-elevation-1: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-elevation-2: 0 4px 16px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-elevation-3: 0 12px 48px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
}