/* ════════════════════════════════════════════════
   TOKENS & RESET
════════════════════════════════════════════════ */
:root {
  --bg:        #07070A;
  --surf:      #0D0D12;
  --card:      #111118;
  --border:    rgba(255,255,255,0.06);
  --border-hov:rgba(255,255,255,0.12);
  --t1:        #F5F7FA;
  --t2:        #C6CDD8;
  --t3:        #8B93A3;
  --accent-a:  #7c3aed;
  --accent-b:  #4f46e5;
  --accent-c:  #06b6d4;
  --accent-d:  #a855f7;
  --r:         12px;
  --ease:      cubic-bezier(.16,1,.3,1);
}

/* ────────────────────────────────────────────────
   LIGHT MODE — Sistema di Design Premium
   Ispirazione: Linear, Vercel, Stripe, Arc
   ──────────────────────────────────────────────── */
html.light-mode {
  /* Backgrounds — scala cromatica neutro-fredda */
  --bg:        #F8F8FB;
  --surf:      #F1F2F7;
  --card:      #FFFFFF;

  /* Borders — sottilissimi, quasi impercettibili */
  --border:    rgba(15,23,42,0.07);
  --border-hov:rgba(15,23,42,0.14);

  /* Typography — contrasto AA+ garantito */
  --t1:        #0F172A;   /* Primary — quasi nero */
  --t2:        #475569;   /* Secondary — slate-600 */
  --t3:        #64748B;   /* Muted — slate-500 */

  /* Accents — invariati, funzionano benissimo su chiaro */
  --accent-a:  #7c3aed;
  --accent-b:  #4F46E5;
  --accent-c:  #06b6d4;
  --accent-d:  #a855f7;

  /* Ombre — livelli progressivi */
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,.07), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
  --shadow-xl: 0 20px 60px rgba(15,23,42,.12), 0 8px 20px rgba(15,23,42,.07);

  /* Card floating */
  --card-shadow:       0 1px 3px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.05);
  --card-shadow-hover: 0 2px 6px rgba(15,23,42,.08), 0 12px 40px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.08);
}

/* ════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body {
  background: var(--bg);
  color: var(--t1);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.4s ease, color 0.4s ease;
}
::-webkit-scrollbar { width: 2px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.4); border-radius: 2px }