/* -------------------------------------------------
   Existing themes (light, dark, ocean, forest)
   ------------------------------------------------- */
:root {
  --bg: #fdfdfd;
  --text: #1a1a1a;
  --subtle: #555;
  --link: #0066cc;
  --heading: #1a1a1a;
  --desc: #444;
}
[data-theme="dark"] {
  --bg: #1a1a1a;
  --text: #fdfdfd;
  --subtle: #bbb;
  --link: #4da6ff;
  --heading: #fdfdfd;
  --desc: #ccc;
}
[data-theme="ocean"] {
  --bg: #0a1f3d;
  --text: #e0f7fa;
  --subtle: #80deea;
  --link: #ffcc80;
  --heading: #e0f7fa;
  --desc: #b2ebf2;
}
[data-theme="forest"] {
  --bg: #1b2b1a;
  --text: #e8f5e9;
  --subtle: #81c784;
  --link: #ffeb3b;
  --heading: #e8f5e9;
  --desc: #c8e6c9;
}

/* -------------------------------------------------
   NEW THEMES
   ------------------------------------------------- */

/* ---- Cyberpunk (neon on black) ---- */
[data-theme="cyberpunk"] {
  --bg: #0d0d0d;
  --text: #ff00ff;        /* magenta */
  --subtle: #00ffff;      /* cyan */
  --link: #ff00ff;
  --heading: #00ffff;
  --desc: #ff79c6;
}

/* ---- Gruvbox Light ---- */
[data-theme="gruvbox"] {
  --bg: #fbf1c7;
  --text: #3c3836;
  --subtle: #7c6f64;
  --link: #af3a03;        /* orange */
  --heading: #3c3836;
  --desc: #665c54;
}

/* ---- Gruber Darker ---- */
[data-theme="gruber"] {
  --bg: #1e1e1e;
  --text: #e4e4e4;
  --subtle: #9e9e9e;
  --link: #7daea3;        /* teal */
  --heading: #e4e4e4;
  --desc: #bdae93;        /* muted orange */
}

/* Smooth transition */
body { transition: background .3s ease, color .3s ease; }