/* ═══════════════════════════════════════════════
   DESIGN TOKENS — LIGHT (DEFAULT)
═══════════════════════════════════════════════ */
:root, html[data-theme="light"] {
  /* surfaces */
  --bg-base:    #f5f4fa;
  --bg-raised:  #ede9f8;
  --bg-card:    #ffffff;
  --bg-card-2:  #f0edf9;
  --bg-card-3:  #e4dff4;
  --bg-footer:  #1a1228;

  /* text */
  --text-primary:   #12101a;
  --text-secondary: rgba(18,16,26,0.55);
  --text-muted:     rgba(18,16,26,0.38);
  --text-faint:     rgba(18,16,26,0.22);

  /* borders / dividers */
  --border:     rgba(18,16,26,0.09);
  --border-med: rgba(18,16,26,0.16);

  /* nav */
  --nav-bg:     rgba(245,244,250,0.92);
  --nav-border: rgba(18,16,26,0.08);

  /* course card thumb overlays */
  --thumb-1: linear-gradient(135deg,#e6d9ff,#c4a3ff);
  --thumb-2: linear-gradient(135deg,#d0e8ff,#a3c8ff);
  --thumb-3: linear-gradient(135deg,#fffbe0,#ffe9a0);
  --thumb-4: linear-gradient(135deg,#ffe0e0,#ffb3b3);

  /* toggle button */
  --toggle-bg:    rgba(18,16,26,0.08);
  --toggle-icon:  rgba(18,16,26,0.55);

  /* shadows */
  --shadow-card: 0 2px 16px rgba(51,99,68,0.07);
  --shadow-nav:  0 1px 0 var(--nav-border), 0 2px 20px rgba(51,99,68,0.05);

  /* matte-green accent — replaces violet in light mode */
  --violet:        #336344;
  --violet-mid:    #2b5439;
  --violet-bright: #3F7A54;
  --violet-pale:   rgba(51,99,68,0.12);
  --violet-glow:   rgba(51,99,68,0.25);
  --violet-border: rgba(51,99,68,0.35);
  --violet-07:     rgba(51,99,68,0.07);
  --violet-15:     rgba(51,99,68,0.15);
  --violet-20:     rgba(51,99,68,0.2);
  --violet-30:     rgba(51,99,68,0.3);
  --violet-40:     rgba(51,99,68,0.4);
  --violet-50:     rgba(51,99,68,0.5);
  --violet-55:     rgba(51,99,68,0.55);
  --violet-85:     rgba(51,99,68,0.85);

  /* semantic */
  --green: #10b981;
  --amber: #f59e0b;
  --red:   #ef4444;

  /* radius */
  --rad:    10px;
  --rad-lg: 16px;
  --rad-xl: 22px;
  --rad-pill: 100px;
}

/* ═══════════════════════════════════════════════
   DESIGN TOKENS — DARK (TOGGLE)
═══════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* surfaces */
  --bg-base:    #0f0f13;
  --bg-raised:  #1a1a1f;
  --bg-card:    #242429;
  --bg-card-2:  #2e2e36;
  --bg-card-3:  #3a3a45;
  --bg-footer:  #09090d;

  /* violet palette */
  --violet:        #7c3aed;
  --violet-mid:    #6d28d9;
  --violet-bright: #8b5cf6;
  --violet-pale:   rgba(124,58,237,0.12);
  --violet-glow:   rgba(124,58,237,0.25);
  --violet-border: rgba(124,58,237,0.35);
  --violet-07:     rgba(124,58,237,0.07);
  --violet-15:     rgba(124,58,237,0.15);
  --violet-20:     rgba(124,58,237,0.2);
  --violet-30:     rgba(124,58,237,0.3);
  --violet-40:     rgba(124,58,237,0.4);
  --violet-50:     rgba(124,58,237,0.5);
  --violet-55:     rgba(124,58,237,0.55);
  --violet-85:     rgba(124,58,237,0.85);

  /* text */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255,255,255,0.45);
  --text-muted:     rgba(255,255,255,0.25);
  --text-faint:     rgba(255,255,255,0.18);

  /* borders / dividers */
  --border:     rgba(255,255,255,0.07);
  --border-med: rgba(255,255,255,0.12);

  /* nav */
  --nav-bg:     rgba(15,15,19,0.88);
  --nav-border: rgba(255,255,255,0.05);

  /* course card thumb overlays */
  --thumb-1: linear-gradient(135deg,#1a0a2e,#2d1161);
  --thumb-2: linear-gradient(135deg,#0a1628,#1a3a5c);
  --thumb-3: linear-gradient(135deg,#1a1a0a,#2e2a0a);
  --thumb-4: linear-gradient(135deg,#1a0a0a,#3a1414);

  /* toggle button */
  --toggle-bg:    rgba(255,255,255,0.07);
  --toggle-icon:  rgba(255,255,255,0.5);

  /* shadows */
  --shadow-card: none;
  --shadow-nav:  none;
}