/* ============================================================
   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: 264px;
  --toc-w: 210px;
  --topbar-h: 56px;
  --content-max: 860px;
}

/* ---------- DARK (default) ---------- */
:root,
:root[data-theme="dark"] {
  --bg: #0d1117;
  --bg-2: #131a24;
  --bg-3: #1a2331;
  --surface: #161d29;
  --surface-2: #1c2634;
  --elevated: #202b3b;
  --border: #263141;
  --border-strong: #33425a;
  --text: #e6edf3;
  --text-2: #aeb9c6;
  --text-3: #7d8896;
  --accent: #58a6ff;
  --accent-2: #7c5cff;
  --accent-soft: rgba(88, 166, 255, .14);
  --good: #3fb950;
  --warn: #d29922;
  --danger: #f85149;
  --good-soft: rgba(63, 185, 80, .14);
  --warn-soft: rgba(210, 153, 34, .14);
  --danger-soft: rgba(248, 81, 73, .14);
  --code-bg: #0b0f16;
  --code-border: #222c3a;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .5);
  --scrim: rgba(3, 6, 12, .6);

  /* syntax */
  --sx-kw: #ff7b72;
  --sx-str: #a5d6ff;
  --sx-num: #79c0ff;
  --sx-fn: #d2a8ff;
  --sx-com: #8b949e;
  --sx-punc: #c9d1d9;
  --sx-type: #ffa657;
  --sx-var: #7ee787;
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
  --bg: #f6f8fb;
  --bg-2: #eef2f7;
  --bg-3: #e6ecf3;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --elevated: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #1a2230;
  --text-2: #46586e;
  --text-3: #7a8aa0;
  --accent: #2563eb;
  --accent-2: #7c3aed;
  --accent-soft: rgba(37, 99, 235, .10);
  --good: #16a34a;
  --warn: #b45309;
  --danger: #dc2626;
  --good-soft: rgba(22, 163, 74, .10);
  --warn-soft: rgba(180, 83, 9, .10);
  --danger-soft: rgba(220, 38, 38, .10);
  --code-bg: #f6f8fa;
  --code-border: #e4e9f0;
  --shadow: 0 12px 34px -14px rgba(20, 30, 60, .28);
  --shadow-sm: 0 2px 10px -3px rgba(20, 30, 60, .16);
  --scrim: rgba(20, 28, 45, .32);

  --sx-kw: #cf222e;
  --sx-str: #0a3069;
  --sx-num: #0550ae;
  --sx-fn: #8250df;
  --sx-com: #6e7781;
  --sx-punc: #24292f;
  --sx-type: #953800;
  --sx-var: #116329;
}

* { 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); }