@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --purple: #4a2fa0;
  --purple-strong: #39217f;
  --purple-soft: #eeeaf9;
  --purple-faint: #f8f7fc;
  --orange: #e86a1a;
  --orange-soft: #fff2e8;
  --deep: #1a0e50;
  --text: #21174d;
  --muted: #6d6684;
  --subtle: #938da5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --canvas: #f7f6fa;
  --border: rgba(74, 47, 160, .12);
  --border-strong: rgba(74, 47, 160, .2);
  --success: #3b6d11;
  --success-bg: #edf6e5;
  --warning: #a24b13;
  --warning-bg: #fff2e8;
  --danger: #a33a48;
  --danger-bg: #fcedef;
  --info: #2f5e9e;
  --info-bg: #edf4fc;
  --shadow-sm: 0 1px 2px rgba(26, 14, 80, .035), 0 6px 18px rgba(26, 14, 80, .035);
  --shadow-md: 0 12px 36px rgba(26, 14, 80, .09);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --sidebar: 248px;
  --topbar: 68px;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --purple: #a998f0;
  --purple-strong: #c4b8f8;
  --purple-soft: #2b2450;
  --purple-faint: #211c38;
  --deep: #f0ecff;
  --text: #eeeafd;
  --muted: #aaa2c1;
  --subtle: #817995;
  --surface: #171426;
  --surface-raised: #1d1930;
  --canvas: #100e1a;
  --border: rgba(202, 190, 255, .12);
  --border-strong: rgba(202, 190, 255, .21);
  --success: #a8d37d;
  --success-bg: #1e3020;
  --warning: #f2a46e;
  --warning-bg: #382317;
  --danger: #ef9ca8;
  --danger-bg: #391f27;
  --info: #9bc0ef;
  --info-bg: #1d2b40;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.12);
  --shadow-md: 0 16px 40px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 16px/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a, input, select, textarea { outline: none; }
:focus-visible { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--orange) !important; }
::selection { background: var(--purple-soft); color: var(--deep); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }