:root {
  /* ── Core Gradient Palette ── */
  --cyan:    #00c3ff; /* Refined Cyan from reference image */
  --purple:  #7d2ae8; /* Refined Purple from reference image */
  --pink:    #ff21bc; /* Refined Pink from reference image */
  --blue:    #3b82f6; /* Brighter Blue */

  /* ── Backgrounds ── */
  --bg:      #080a12;
  --bg2:     #0d0f1a;
  --bg3:     #0a0c18;

  /* ── Cards ── */
  --card:    #111425;
  --card2:   #16192d;
  --card-hover: #1b1e35;

  /* ── Text ── */
  --text:    #ffffff;
  --muted:   #64748b;
  --muted2:  #94a3b8;

  /* ── Borders ── */
  --border:  rgba(0,245,255,0.12);
  --border2: rgba(0,245,255,0.22);

  /* ── Typography ── */
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body:    "Plus Jakarta Sans", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  /* ── Radii ── */
  --radius-sm:   0.4rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.2rem;
  --radius-xl:   1.8rem;
  --radius-pill: 100px;

  /* ── Transitions ── */
  --transition:      0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Shadows ── */
  --shadow-card:    0 8px 32px rgba(0,0,0,0.6);
  --shadow-hover:   0 32px 96px rgba(0,0,0,0.7), 0 0 64px rgba(0,245,255,0.1);
  --shadow-cyan:    0 0 24px rgba(0,245,255,0.5), 0 0 64px rgba(0,245,255,0.2);
  --shadow-pink:    0 0 24px rgba(255,0,127,0.5), 0 0 64px rgba(255,0,127,0.2);
  --shadow-purple:  0 0 24px rgba(139,92,246,0.5), 0 0 64px rgba(139,92,246,0.2);

  /* ── Gradient Shortcuts ── */
  --grad-main:   linear-gradient(135deg, var(--cyan) 0%, var(--purple) 50%, var(--pink) 100%);
  --grad-text:   linear-gradient(90deg, #3AA0FF, #7B3FE4, #FF3FA4);
  --grad-border: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
}

/* ── Light Mode Overrides ── */
body.light-mode {
  --bg:      #f8fafc;
  --bg2:     #ffffff;
  --bg3:     #f1f5f9;
  --card:    #ffffff;
  --card2:   #f8fafc;
  --card-hover: #f1f5f9;
  --text:    #0f172a;
  --muted:   #64748b;
  --muted2:  #475569;
  --border:  rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.12);
  --shadow-card:    0 8px 32px rgba(0,0,0,0.05);
  --shadow-hover:   0 20px 60px rgba(0,0,0,0.1), 0 0 40px rgba(0,195,255,0.05);

  /* Lighten up the gradients slightly for better contrast on white */
  --grad-text:   linear-gradient(90deg, #1e70bf, #612dbf, #d11e9a);
}