/* ── Design tokens ─────────────────────────────────────────────────────── */

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

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  --header-h: 76px;
  --panel-l: 336px;
  --panel-r: 400px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 140ms;
}

/* ── Dark (default) ────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-app: #080B12;
  --bg-panel: #0D1119;
  --bg-raised: #111725;
  --bg-sunken: #0A0E16;
  --bg-input: #141B2A;
  --bg-hover: #18202F;
  --bg-active: #1C2740;
  --bg-canvas: #0F1117;

  --line: #1D2436;
  --line-soft: #161C2B;
  --line-strong: #2A3450;

  --text: #E8EDF7;
  --text-2: #97A3BD;
  --text-3: #64708C;

  --accent: #2F6BFF;
  --accent-hover: #4A80FF;
  --accent-soft: rgba(47, 107, 255, .14);
  --accent-text: #FFFFFF;

  --danger: #F0556B;
  --danger-soft: rgba(240, 85, 107, .14);
  --success: #35C88E;
  --warn: #E8B04B;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .65);

  --track: #202A3E;
  --checker-a: #0C1017;
  --checker-b: #141A25;

  --code-tag: #6AA9FF;
  --code-attr: #C79BF5;
  --code-val: #8FD98A;
  --code-punct: #6A7896;
}

/* ── Light ─────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-app: #F1F3F8;
  --bg-panel: #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F5F7FB;
  --bg-input: #F2F4F9;
  --bg-hover: #EBEFF7;
  --bg-active: #E1E9FC;
  --bg-canvas: #FFFFFF;

  --line: #E0E5EF;
  --line-soft: #EDF0F6;
  --line-strong: #CAD3E3;

  --text: #131926;
  --text-2: #5A6579;
  --text-3: #8A93A6;

  --accent: #2F6BFF;
  --accent-hover: #1E58EB;
  --accent-soft: rgba(47, 107, 255, .1);
  --accent-text: #FFFFFF;

  --danger: #D93A52;
  --danger-soft: rgba(217, 58, 82, .1);
  --success: #12996A;
  --warn: #B27A0A;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .1);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, .16);

  --track: #DCE2ED;
  --checker-a: #FFFFFF;
  --checker-b: #EFF2F7;

  --code-tag: #2B6CD4;
  --code-attr: #8B44C4;
  --code-val: #1F7A44;
  --code-punct: #7A8598;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}