/* ============================================================
   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) — "neural ink": deep violet-black, violet+cyan accents ---------- */
:root,
:root[data-theme="dark"] {
  --bg: #0a0912;
  --bg-2: #100e1e;
  --bg-3: #16132a;
  --surface: #131126;
  --surface-2: #1a1733;
  --elevated: #211d3d;
  --border: #2a2648;
  --border-strong: #3d3766;
  --text: #ece9f7;
  --text-2: #b4aed0;
  --text-3: #837da6;
  --accent: #a78bfa;
  --accent-2: #22d3ee;
  --accent-soft: rgba(167, 139, 250, .15);
  --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: #0c0a1a;
  --code-border: #241f43;
  --shadow: 0 16px 40px -16px rgba(10, 4, 30, .75);
  --shadow-sm: 0 2px 10px -2px rgba(10, 4, 30, .6);
  --scrim: rgba(6, 3, 16, .64);

  /* identity gradient (violet -> fuchsia -> cyan) */
  --grad: linear-gradient(100deg, #a78bfa 0%, #d946ef 45%, #22d3ee 100%);
  --grad-soft: linear-gradient(100deg, rgba(167,139,250,.18), rgba(34,211,238,.14));

  /* syntax */
  --sx-kw: #d8b4fe;
  --sx-str: #7dd3fc;
  --sx-num: #22d3ee;
  --sx-fn: #f0abfc;
  --sx-com: #6f6a92;
  --sx-punc: #c9c5e4;
  --sx-type: #fca5a5;
  --sx-var: #6ee7b7;
}

/* ---------- LIGHT — "lavender lab" ---------- */
:root[data-theme="light"] {
  --bg: #f7f6fc;
  --bg-2: #efedf9;
  --bg-3: #e7e3f5;
  --surface: #ffffff;
  --surface-2: #f7f5fd;
  --elevated: #ffffff;
  --border: #e6e2f3;
  --border-strong: #cec8e6;
  --text: #1b1636;
  --text-2: #4c4670;
  --text-3: #7d78a2;
  --accent: #7c3aed;
  --accent-2: #0891b2;
  --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: #f8f6fe;
  --code-border: #eae5f6;
  --shadow: 0 14px 36px -14px rgba(76, 40, 130, .22);
  --shadow-sm: 0 2px 10px -3px rgba(76, 40, 130, .14);
  --scrim: rgba(30, 20, 55, .32);

  --grad: linear-gradient(100deg, #7c3aed 0%, #c026d3 48%, #0891b2 100%);
  --grad-soft: linear-gradient(100deg, rgba(124,58,237,.12), rgba(8,145,178,.10));

  --sx-kw: #7c3aed;
  --sx-str: #0369a1;
  --sx-num: #0e7490;
  --sx-fn: #a21caf;
  --sx-com: #6b7280;
  --sx-punc: #292440;
  --sx-type: #b45309;
  --sx-var: #047857;
}

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