/* ============================================================
   theme.css — design tokens + light/dark themes
   ============================================================ */

:root {
  /* Radii / spacing / motion */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: 140ms;
  --med: 240ms;
  --slow: 400ms;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  --sidebar-w: 272px;
  --toc-w: 210px;
  --topbar-h: 56px;
  --content-max: 860px;
}

/* ---------- DARK (default) ---------- */
:root,
:root[data-theme="dark"] {
  --bg: #0e0b16;
  --bg-2: #16111f;
  --bg-3: #1e1730;
  --surface: #191324;
  --surface-2: #211934;
  --elevated: #251c3a;
  --border: #2c2340;
  --border-strong: #3d3057;
  --text: #ece8f5;
  --text-2: #b8b0cc;
  --text-3: #857b9c;
  --accent: #a78bfa;
  --accent-2: #f472b6;
  --accent-soft: rgba(167, 139, 250, .16);
  --good: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --good-soft: rgba(52, 211, 153, .14);
  --warn-soft: rgba(251, 191, 36, .14);
  --danger-soft: rgba(251, 113, 133, .14);
  --code-bg: #0b0812;
  --code-border: #241c34;
  --shadow: 0 10px 34px -12px rgba(0, 0, 0, .66);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .55);
  --scrim: rgba(8, 4, 16, .62);

  /* syntax */
  --sx-kw: #f9a8d4;
  --sx-str: #a7f3d0;
  --sx-num: #c4b5fd;
  --sx-fn: #d8b4fe;
  --sx-com: #857b9c;
  --sx-punc: #cbc4dc;
  --sx-type: #fcd34d;
  --sx-var: #67e8f9;
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
  --bg: #faf8ff;
  --bg-2: #f2edfb;
  --bg-3: #eae2f6;
  --surface: #ffffff;
  --surface-2: #f8f4fd;
  --elevated: #ffffff;
  --border: #e9e1f4;
  --border-strong: #d6c9ec;
  --text: #211a2e;
  --text-2: #574b6b;
  --text-3: #8b7ea3;
  --accent: #7c3aed;
  --accent-2: #db2777;
  --accent-soft: rgba(124, 58, 237, .10);
  --good: #059669;
  --warn: #b45309;
  --danger: #e11d48;
  --good-soft: rgba(5, 150, 105, .10);
  --warn-soft: rgba(180, 83, 9, .10);
  --danger-soft: rgba(225, 29, 72, .10);
  --code-bg: #f8f4fc;
  --code-border: #ece4f6;
  --shadow: 0 12px 34px -14px rgba(60, 30, 90, .26);
  --shadow-sm: 0 2px 10px -3px rgba(60, 30, 90, .16);
  --scrim: rgba(35, 20, 55, .32);

  --sx-kw: #be185d;
  --sx-str: #047857;
  --sx-num: #6d28d9;
  --sx-fn: #7c3aed;
  --sx-com: #8b7ea3;
  --sx-punc: #3f3452;
  --sx-type: #b45309;
  --sx-var: #0e7490;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--med) var(--ease), color var(--med) var(--ease);
}

::selection { background: var(--accent-soft); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); }