/* ═══════════════════════════════════════════════════════════
   DOLIGHT — DESIGN TOKENS
   Variabili globali. Nessuna regola che applica stile direttamente.
   Riferimento: piano sez. 5 (Design system — fondamenta).
═══════════════════════════════════════════════════════════ */

:root {

  /* ─── PALETTE DARK (sfondi principali) ─── */
  --bg:            #0b1340;
  --bg-2:          #0d1850;
  --bg-3:          #071030;
  --surf:          #132060;
  --surf-2:        #1a2a78;
  --border:        rgba(100, 140, 255, .13);
  --border-strong: rgba(100, 140, 255, .22);

  /* ─── PALETTE LIGHT (sezioni chiare) ─── */
  --lt-bg:     #f4f6fb;
  --lt-surf:   #ffffff;
  --lt-text:   #0b1340;
  --lt-mid:    #4e6899;
  --lt-dim:    #8fa6d4;
  --lt-border: rgba(11, 19, 64, .09);

  /* ─── ACCENT BRAND ─── */
  --blue:     #3b6ef8;
  --blue-l:   #93b4ff;
  --red:      #e8001c;
  --red-l:    #ff8095;
  --violet:   #8b1fba;
  --violet-l: #c084fc;
  --amber:    #f5a000;
  --amber-l:  #fbbf24;
  --teal:     #0ea5a0;
  --teal-l:   #5eead4;
  --green:    #16a34a;
  --green-l:  #4ade80;

  /* ─── TESTO SU DARK ─── */
  --text:         #e8eef8;
  --text-mid:     #8fa6d4;
  --text-dim:     #4e6899;
  --text-on-dark: #ffffff;

  /* ─── BRAND BLUGEA (solo pagina Blugea) ─── */
  --blugea-dark:  #14171A;
  --blugea-char:  #2B2E33;
  --blugea-gold:  #CBA267;
  --blugea-grey:  #A7A39A;
  --blugea-cream: #F7F6F2;

  /* ─── GRADIENT ─── */
  --gradient-brand:     linear-gradient(90deg, #e8001c 0%, #8b1fba 50%, #3b6ef8 100%);
  --gradient-hero-dark: linear-gradient(135deg, #0b1340 0%, #132060 100%);
  --gradient-ai-dark:   linear-gradient(135deg, #0d0825 0%, #160d40 50%, #1d0f50 100%);
  --gradient-cta:       linear-gradient(135deg, #0b1340 0%, #132060 100%);
  --gradient-amber-red: linear-gradient(90deg, #f5a000 0%, #e8001c 100%);
  --gradient-teal-blue: linear-gradient(90deg, #0ea5a0 0%, #3b6ef8 100%);

  /* ─── SPAZIATURE (mobile-first, fluido sulle grandi) ─── */
  --space-1:       4px;
  --space-2:       8px;
  --space-3:       12px;
  --space-4:       16px;
  --space-5:       20px;
  --space-6:       24px;
  --space-7:       32px;
  --space-8:       clamp(32px, 5vw, 48px);
  --space-section: clamp(56px, 9vw, 96px);
  --space-page-x:  clamp(20px, 4vw, 32px);

  /* ─── TIPOGRAFIA — scala fluida ─── */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-display-1: clamp(26px, 5.5vw, 52px);
  --fs-display-2: clamp(22px, 4vw, 40px);
  --fs-display-3: clamp(18px, 3vw, 28px);
  --fs-lead:      clamp(15px, 1.4vw, 18px);
  --fs-body:      16px;
  --fs-small:     13px;
  --fs-micro:     11px;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-body:   1.6;
  --lh-loose:  1.75;

  --ls-display: -0.03em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.12em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* ─── RADIUS ─── */
  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* ─── SHADOW & GLOW ─── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, .05);
  --shadow:       0 4px 16px rgba(0, 0, 0, .08);
  --shadow-lg:    0 12px 40px rgba(59, 110, 248, .12);
  --glow-blue:    0 0 40px rgba(59, 110, 248, .18);
  --glow-red:     0 8px 30px rgba(232, 0, 28, .28);
  --glow-violet:  0 8px 30px rgba(139, 31, 186, .35);

  /* ─── MOTION ─── */
  --motion-fast: 120ms;
  --motion:      200ms;
  --motion-slow: 400ms;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);

  /* ─── Z-INDEX ─── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  50;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}