:root {
  /* Dark Theme (Default) */
  --bg: #070f1e;
  /* Main background */
  --s1: #0d1b30;
  /* Surface 1 */
  --s2: #112038;
  /* Surface 2 */
  --s3: #162844;
  /* Surface 3 */
  --teal: #00c9a7;
  /* Primary accent (teal) */
  --teal2: #00a88c;
  /* Teal hover */
  --teal3: #007a66;
  /* Teal dark */
  --text: #edf4ff;
  /* Primary text */
  --t2: #8fadc8;
  /* Secondary text */
  --muted: #4a6580;
  /* Muted text */
  --muted2: #2a3d52;
  /* Dark muted */

  /* Status Colors */
  --green: #22c55e;
  /* Success/Complete */
  --yellow: #4b5e3c; /* Army Green */
  --red: #ef4444;
  /* Error/Failed */
  --blue: #3b82f6;
  /* Info */
  --purple: #a855f7;
  /* Special */
  --orange: #f97316; /* Orange */

  /* Borders */
  --border: rgba(0, 201, 167, 0.15);
  --b2: rgba(0, 201, 167, 0.06);
  --sh: 0 4px 32px rgba(0, 0, 0, 0.5);

  /* Sizing & Constants */
  --nav-height: 54px;
  --border-radius: 12px;
  --btn-text: #0a1628;

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
  /* Light Theme (Toggleable) */
  --bg: #f2fdfb;
  --s1: #e8f8f4;
  --s2: #d8f2ec;
  --s3: #c8eae2;
  --teal: #006b57;
  --teal2: #005343;
  --teal3: #003b2f;
  --text: #06111e;
  --t2: #456280;
  --muted: #627f9d;
  --muted2: #c1d8d2;

  /* Borders */
  --border: rgba(0, 107, 87, 0.15);
  --b2: rgba(0, 107, 87, 0.06);
  --sh: 0 4px 32px rgba(0, 107, 87, 0.08);
}