/* ============================================================
   ROOT VARIABLES
============================================================ */
/* Define global CSS variables for colors, spacing, typography, 
and other design tokens to maintain consistency across the website */
:root {
  --bg-0: #0a0f1a;
  --bg-1: #060a12;
  --bg-2: #0d1525;

  --panel-0: rgba(12, 20, 36, 0.72);
  --panel-1: rgba(16, 26, 47, 0.62);

  --text-0: #ffffff;
  --text-1: #d4deea;
  --text-2: #a9bad0;
  --text-3: #7f93ad;

  --blue: #0066ff;
  --cyan: #00d4ff;
  --green: #00ff88;

  --border-1: rgba(0, 212, 255, 0.18);
  --border-2: rgba(0, 212, 255, 0.28);

  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 14px;

  --shadow-1: 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 16px 44px rgba(0, 0, 0, 0.45);

  --ease: 220ms ease;
  --anim-diagonal: 15s;
  --anim-ease: ease;
}

/* ============================================================
   LIGHT THEME OVERRIDES
   Applied when body.light is active via JS_Theme.js
============================================================ */
body.light {
  --bg-0: #f0f4f8;
  --bg-1: #e8edf3;
  --bg-2: #dce3ec;

  --panel-0: rgba(220, 228, 240, 0.80);
  --panel-1: rgba(200, 212, 228, 0.70);

  --text-0: #0d1525;
  --text-1: #1e2d42;
  --text-2: #3a4f68;
  --text-3: #5a7090;

  --blue:  #0050cc;
  --cyan:  #0099bb;
  --green: #00994d;

  --border-1: rgba(0, 100, 180, 0.18);
  --border-2: rgba(0, 100, 180, 0.32);

  --shadow-1: 0 10px 28px rgba(0, 0, 0, 0.12);
  --shadow-2: 0 16px 44px rgba(0, 0, 0, 0.18);
}