/* Theme: dark default + light via [data-theme="light"] */
:root {

  --bg: #0b0f1a;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.90);
  --text2: rgba(255,255,255,.70);
  --border: rgba(255,255,255,.12);
  --grad: radial-gradient(1200px 600px at 10% 0%, rgba(47,123,255,.20), transparent 50%),
          radial-gradient(900px 500px at 90% 10%, rgba(70,180,255,.12), transparent 45%),
          linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%);
}

:root[data-theme="light"] {
  --bg: #f5f7fb;
  --surface: rgba(0,0,0,.04);
  --surface2: rgba(0,0,0,.06);
  --text: rgba(8,12,24,.92);
  --text2: rgba(8,12,24,.70);
  --border: rgba(0,0,0,.12);
  --grad: radial-gradient(1200px 600px at 10% 0%, rgba(47,123,255,.12), transparent 55%),
          radial-gradient(900px 500px at 90% 10%, rgba(70,180,255,.10), transparent 50%),
          linear-gradient(180deg, rgba(0,0,0,.015), transparent 30%);
}

body {

    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    background-image: var(--grad);
    background-attachment: fixed;

}

/* Theme toggle icons */
:root:not([data-theme="light"]) #themeToggle [data-icon="sun"] { display: none; }
:root[data-theme="light"] #themeToggle [data-icon="moon"] { display: none; }