/* ═══════════════════════════════════════
   HELLENGINEERS — CSS VARIABLES (TOKENS)
   Dark & Light Theme System
═══════════════════════════════════════ */
:root {
  /* Brand Colors */
  --accent:       #f97316;
  --accent2:      #fb923c;
  --accent-dim:   rgba(249,115,22,0.10);
  --accent-border:rgba(249,115,22,0.25);
  --blue:         #6366f1;
  --blue-dim:     rgba(99,102,241,0.10);
  --teal:         #14b8a6;
  --teal-dim:     rgba(20,184,166,0.10);
  --green:        #22c55e;
  --green-dim:    rgba(34,197,94,0.10);
  --red:          #ef4444;
  --red-dim:      rgba(239,68,68,0.10);
  --purple:       #a855f7;

  /* Typography */
  --font-h: 'Syne', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Spacing */
  --nav-h:      62px;
  --sidebar-w:  240px;

  /* Border Radius */
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  24px;

  /* Transitions */
  --trans: 0.22s ease;
}

/* ─── DARK THEME (default) ─── */
[data-theme="dark"] {
  --bg:        #080810;
  --bg2:       #0e0e1c;
  --bg3:       #13132a;
  --surface:   #18182e;
  --surface2:  #1f1f38;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.13);
  --text:      #f0eff5;
  --text2:     #8b8a99;
  --text3:     #4d4d60;
  --shadow:    0 4px 24px rgba(0,0,0,0.45);
  --glow:      0 0 0 1px rgba(249,115,22,0.3), 0 0 20px rgba(249,115,22,0.1);
  --nav-bg:    rgba(8,8,16,0.85);
  --card-bg:   #0e0e1c;
  --input-bg:  #13132a;
  --code-bg:   #1a1a2e;
}

/* ─── LIGHT THEME ─── */
[data-theme="light"] {
  --bg:        #f5f5f8;
  --bg2:       #ffffff;
  --bg3:       #ededf5;
  --surface:   #ffffff;
  --surface2:  #f0f0f8;
  --border:    rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.15);
  --text:      #111118;
  --text2:     #6b6b80;
  --text3:     #a0a0b0;
  --shadow:    0 4px 24px rgba(0,0,0,0.09);
  --glow:      0 0 0 1px rgba(249,115,22,0.4), 0 0 16px rgba(249,115,22,0.08);
  --nav-bg:    rgba(245,245,248,0.92);
  --card-bg:   #ffffff;
  --input-bg:  #f5f5f8;
  --code-bg:   #f0f0f8;
}