:root,
:root[data-theme="light"] {
  --brand-600: transparentize(#2563eb, 0.12);
  --brand-650: transparentize(#2563eb, 0.25);
  --bg: #f4f7ff;
  --surface: #e8eefc;
  --border: #cfdaf6;
  --text: #0f172a;
  --text-soft: #334155;
  --text-muted: #64748b;
  --dark: #020617;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;

  --surface-1: rgba(255, 255, 255, 0.78);
  --surface-2: rgba(255, 255, 255, 0.56);
  --border-weak: rgba(37, 99, 235, 0.12);
  --border-strong: rgba(37, 99, 235, 0.25);
  --shadow-1: 0 22px 50px rgba(15, 23, 42, 0.10);

  --font-base-size: 16px;
  --line-height: 1.6;
  --content-max: 72ch;

  --bg-elev: var(--bg);
  --panel: rgba(255, 255, 255, 0.72);
  --panel-2: rgba(248, 250, 255, 0.85);
  --muted: var(--text-muted);
  --acc: var(--brand-600);
  --acc-2: var(--brand-650);
  --acc-3: #dc2626;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --font: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: var(--r-sm);
  --gap-1: var(--s-1);
  --gap-2: var(--s-2);
  --gap-3: var(--s-3);
  --gap-4: var(--s-5);
  --gap-5: var(--s-6);
  --shadow-2: var(--shadow-1);
  --focus: 0 0 0 4px rgba(37, 99, 235, 0.25);
}

:root[data-theme="dark"] {
  --bg: #020617;
  --surface: #0b1226;
  --border: #24345b;
  --text: #eff6ff;
  --text-soft: #cbd5e1;
  --text-muted: #94a3b8;
  --panel: rgba(15, 23, 42, 0.72);
  --panel-2: rgba(15, 23, 42, 0.86);
  --surface-1: rgba(15, 23, 42, 0.78);
  --surface-2: rgba(30, 41, 59, 0.58);
  --border-weak: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(96, 165, 250, 0.5);
  --shadow-1: 0 24px 56px rgba(2, 6, 23, 0.48);
}

:root[data-theme="coder"] {
  --bg: #040916;
  --surface: #0e172d;
  --border: #264278;
  --text: #dbeafe;
  --text-soft: #bfdbfe;
  --text-muted: #7dd3fc;
  --brand-600: #22d3ee;
  --brand-650: #06b6d4;
  --panel: rgba(8, 19, 44, 0.72);
  --panel-2: rgba(10, 25, 53, 0.84);
}