/* Light / dark / system — semantic tokens + palette overrides */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --page-bg: #030303;
  --surface-bg: hsla(0, 0%, 4%, 0.78);
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-subtle: rgba(255, 255, 255, 0.03);
  --geo-vignette-top: #030303;
  --geo-vignette-mid: rgba(3, 3, 3, 0.8);
  --geo-shape-border: rgba(255, 255, 255, 0.15);
  --geo-shape-glow: rgba(255, 255, 255, 0.1);
  --geo-shape-highlight: rgba(255, 255, 255, 0.2);

  --spotlight-outer: rgba(99, 102, 241, 0.28);
  --spotlight-mid: rgba(129, 140, 248, 0.14);
  --spotlight-rose: rgba(244, 63, 94, 0.1);
  --spotlight-core: rgba(255, 255, 255, 0.07);
  --spotlight-core-accent: rgba(99, 102, 241, 0.18);

  --toggle-bg-surface: transparent;
  --toggle-bg-border: rgba(255, 255, 255, 0.06);
  --toggle-fg: hsla(0, 0%, 100%, 0.88);
  --toggle-muted: hsla(0, 0%, 100%, 0.38);
  --toggle-active-border: rgba(255, 255, 255, 0.12);
  --toggle-active-fill: rgba(99, 102, 241, 0.1);
}

[data-theme="light"] {
  color-scheme: light;

  --page-bg: #f0f2f8;
  --surface-bg: hsla(0, 0%, 100%, 0.88);
  --surface-border: rgba(15, 23, 42, 0.1);
  --surface-subtle: rgba(99, 102, 241, 0.06);
  --geo-vignette-top: #f0f2f8;
  --geo-vignette-mid: rgba(240, 242, 248, 0.85);
  --geo-shape-border: rgba(99, 102, 241, 0.2);
  --geo-shape-glow: rgba(99, 102, 241, 0.08);
  --geo-shape-highlight: rgba(99, 102, 241, 0.12);

  --spotlight-outer: rgba(99, 102, 241, 0.18);
  --spotlight-mid: rgba(129, 140, 248, 0.1);
  --spotlight-rose: rgba(244, 63, 94, 0.08);
  --spotlight-core: rgba(99, 102, 241, 0.1);
  --spotlight-core-accent: rgba(99, 102, 241, 0.14);

  --toggle-bg-surface: transparent;
  --toggle-bg-border: rgba(99, 102, 241, 0.12);
  --toggle-fg: hsla(240, 18%, 22%, 0.9);
  --toggle-muted: hsla(240, 10%, 40%, 0.45);
  --toggle-active-border: rgba(99, 102, 241, 0.28);
  --toggle-active-fill: rgba(99, 102, 241, 0.08);

  --bg-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(240, 25%, 96%) 3%,
    hsl(240, 20%, 92%) 97%
  );
  --bg-gradient-jet: linear-gradient(
    to bottom right,
    hsla(0, 0%, 100%, 0.9) 0%,
    hsla(240, 20%, 96%, 0) 100%
  ), hsl(0, 0%, 100%);
  --bg-gradient-yellow-1: linear-gradient(
    to bottom right,
    hsl(239, 84%, 67%) 0%,
    hsla(351, 90%, 65%, 0) 55%
  );
  --bg-gradient-yellow-2: linear-gradient(
    135deg,
    hsla(239, 84%, 67%, 0.12) 0%,
    hsla(351, 90%, 65%, 0) 59.86%
  ), hsl(0, 0%, 100%);
  --border-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(240, 12%, 88%) 0%,
    hsla(240, 12%, 88%, 0) 50%
  );

  --jet: hsl(240, 12%, 88%);
  --onyx: hsl(240, 20%, 96%);
  --eerie-black-1: hsl(0, 0%, 100%);
  --eerie-black-2: hsl(240, 20%, 97%);
  --smoky-black: #f0f2f8;
  --white-1: hsl(240, 18%, 12%);
  --white-2: hsl(240, 15%, 18%);
  --light-gray: hsl(240, 8%, 38%);
  --light-gray-70: hsla(240, 8%, 38%, 0.75);

  --shadow-1: 0 4px 20px hsla(240, 30%, 40%, 0.08);
  --shadow-2: 0 16px 30px hsla(240, 30%, 40%, 0.1);
  --shadow-3: 0 16px 40px hsla(240, 30%, 40%, 0.12);
  --shadow-4: 0 25px 50px hsla(240, 30%, 40%, 0.1);
  --shadow-5: 0 24px 80px hsla(240, 30%, 40%, 0.12);

  --accent-glow: 0 0 28px rgba(99, 102, 241, 0.12);
  --accent-glow-strong: 0 0 36px rgba(244, 63, 94, 0.1);
}

[data-theme="light"] .geo-bg__wash {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.08) 0%,
    transparent 45%,
    rgba(244, 63, 94, 0.06) 100%
  );
}

[data-theme="light"] .geo-shape--indigo {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.22), transparent);
}

[data-theme="light"] .geo-shape--rose {
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.18), transparent);
}

.sidebar,
article,
.navbar,
body {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.2s ease,
    box-shadow 0.35s ease;
}