:root {

  --blue-deep: #2563eb;
  --blue-soft: #60a5fa;
  --blue-light: #93c5fd;


  --bubble-blue-deep: rgba(37, 99, 235, 0.50);
  --bubble-blue-soft: rgba(96, 165, 250, 0.50);
  --bubble-blue-light: rgba(125, 211, 252, 0.50);


  --green-dark-1: #00b85a;
  --green-dark-1-soft: rgba(0, 184, 90, 0.14);

  --neon-blue: #22d3ee;
  --neon-purple: #a855f7;
}

/* =========================================
   LIGHT THEME
========================================= */
:root[data-theme="light"] {
  --bg-main: #f5f7fb;
  --bg-surface: #ffffff;
  --bg-soft: #eef2ff;
  --section-alt: #e5ecff;

  --text-main: #0f172a;
  --text-muted: #64748b;

  --accent: #007aff;
  --accent-soft: rgba(0, 122, 255, 0.08);

  --border-subtle: rgba(148, 163, 184, 0.55);
  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.12);


  --wave-1: var(--blue-deep);
  --wave-2: var(--blue-soft);
  --wave-3: var(--blue-light);

}

:root[data-theme="dark"] {
  --bg-main: radial-gradient(circle at top, #020617 0%, #020617 40%, #000 100%);
  --bg-surface: #020617;
  --bg-soft: #0b0f1c;
  --section-alt: radial-gradient(circle at top, #020617 0%, #020617 40%, #000 100%);

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;

  --accent: var(--green-dark-1);
  --accent-soft: var(--green-dark-1-soft);

  --border-subtle: rgba(45, 55, 72, 0.7);
  --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.85);


  --wave-1: var(--green-dark-1);
  --wave-2: var(--neon-blue);
  --wave-3: var(--neon-purple);


  --star-core: rgba(255, 255, 255, 0.75);
  --star-glow: rgba(37, 99, 235, 0.28);
}