:root {

  /* ==================================
     DARK THEME (DEFAULT)
  ================================== */

  --bg-primary: #0b1020;
  --bg-secondary: #12182b;

  --glass: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.12);

  --border: rgba(255, 255, 255, 0.12);

  --primary: #7c5cff;
  --primary-hover: #9276ff;

  --accent: #4fd1c5;

  --text-primary: #ffffff;
  --text-secondary: #aab4c5;

  /* ==================================
     SHADOWS
  ================================== */

  --shadow:
    0 20px 40px rgba(0, 0, 0, 0.35);

  --button-shadow:
    0 8px 20px rgba(0, 0, 0, 0.15);

  --glow-primary:
    0 0 30px rgba(124, 92, 255, 0.25);

  /* ==================================
     RADIUS
  ================================== */

  --radius-small: 16px;
  --radius-medium: 24px;
  --radius-large: 40px;

  /* ==================================
     TRANSITIONS
  ================================== */

  --transition-fast: .2s ease;
  --transition-normal: .3s ease;
  --transition-slow: .5s ease;
}

/* ==================================
   LIGHT THEME
================================== */

[data-theme="light"] {

  --bg-primary: #eef2f8;
  --bg-secondary: #ffffff;

  --glass: rgba(255, 255, 255, 0.72);
  --glass-hover: rgba(255, 255, 255, 0.92);

  --border: rgba(15, 23, 42, 0.08);

  --primary: #7c5cff;
  --primary-hover: #9276ff;

  --accent: #14b8a6;

  --text-primary: #0f172a;
  --text-secondary: #64748b;

  --shadow:
    0 12px 40px rgba(15, 23, 42, 0.08);

  --button-shadow:
    0 8px 24px rgba(15, 23, 42, 0.06);

  --glow-primary:
    0 0 24px rgba(124, 92, 255, 0.15);
}