/* ═══════════════════════════════════════
   CSS CUSTOM PROPERTIES – THEME TOKENS
═══════════════════════════════════════ */
:root {
  /* Dark theme (default) */
  --bg-primary:   #0B0E1A;
  --bg-secondary: #111827;
  --bg-card:      #161D2F;
  --bg-card2:     #1C2539;
  --bg-nav:       rgba(11,14,26,0.95);
  --border:       rgba(255,255,255,0.07);
  --border2:      rgba(255,255,255,0.12);
  --text-primary: #F0F4FF;
  --text-secondary:#94A3B8;
  --text-muted:   #4B5875;
  --blue:         #4F8EF7;
  --blue-dim:     rgba(79,142,247,0.15);
  --purple:       #A855F7;
  --purple-dim:   rgba(168,85,247,0.15);
  --green:        #22D3A5;
  --green-dim:    rgba(34,211,165,0.12);
  --amber:        #FBBF24;
  --amber-dim:    rgba(251,191,36,0.12);
  --cyan:         #22D3EE;
  --red:          #F87171;
  --hero-grad:    linear-gradient(135deg, #0B0E1A 0%, #111827 50%, #0f172a 100%);
  --card-shadow:  0 4px 24px rgba(0,0,0,0.4);
  --nav-h: 64px;
}
[data-theme="light"] {
  --bg-primary:   #F8FAFF;
  --bg-secondary: #EEF2FB;
  --bg-card:      #FFFFFF;
  --bg-card2:     #F1F5FF;
  --bg-nav:       rgba(248,250,255,0.97);
  --border:       rgba(0,0,0,0.08);
  --border2:      rgba(0,0,0,0.14);
  --text-primary: #0F172A;
  --text-secondary:#475569;
  --text-muted:   #94A3B8;
  --blue:         #2563EB;
  --blue-dim:     rgba(37,99,235,0.1);
  --purple:       #7C3AED;
  --purple-dim:   rgba(124,58,237,0.1);
  --green:        #059669;
  --green-dim:    rgba(5,150,105,0.1);
  --amber:        #D97706;
  --amber-dim:    rgba(217,119,6,0.1);
  --cyan:         #0891B2;
  --red:          #DC2626;
  --hero-grad:    linear-gradient(135deg, #EEF2FB 0%, #F8FAFF 50%, #EDF2FF 100%);
  --card-shadow:  0 4px 24px rgba(0,0,0,0.08);
}