/* ─── tokens ──────────────────────────────────────────────────────────────── */
:root {
  --bg: #101218;
  --panel: #171a22;
  --panel-2: #1d2029;
  --line: #262a36;
  --line-2: #343949;
  --text: #e7e9ef;
  --text-2: #a4aab8;
  --muted: #6f7686;
  --accent: #7c7bf5;                 /* brand indigo, lifted for dark surfaces (brand-kit) */
  --accent-2: #a5b4fc;               /* brand periwinkle */
  --accent-soft: rgba(124, 123, 245, 0.16);
  --ok: #3ecf8e;
  --warn: #f5b64d;
  --err: #ff6b6b;
  --user-bubble: #222633;
  --header: #1e2330;                 /* the top bar, a step off the panels so the chrome reads as chrome (#280) */
  --radius: 10px;
  --radius-sm: 7px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 30px rgba(0, 0, 0, 0.35);
  /* the rest of the palette, so nothing below hard-codes a colour (#160) */
  --on-accent: #fff;                 /* text on an accent background */
  --hover: rgba(255, 255, 255, 0.03); /* a row under the pointer */
  --hover-2: rgba(255, 255, 255, 0.05);
  --scrim: rgba(0, 0, 0, 0.55);
  --pop: #1c1f28;                    /* menus and popovers */
  --term: #0d0f14;                   /* terminal and log backgrounds: these stay properly dark */
  --term-text: #cfd3dc;
  --danger: #e5484d;
  --amber: #e6b450;
  --merged: #a371f7;
  --inset: rgba(255, 255, 255, 0.04);
  --frame: #fff;                     /* the preview frame's own ground */
  /* The ground every signed-out page stands on: two washes and a fine dot grid (#160). */
  --page-glow-1: rgba(124, 123, 245, .22);
  --page-glow-2: rgba(62, 207, 142, .12);
  --page-dot: rgba(255, 255, 255, .07);
  color-scheme: dark;
}
/* Light: same roles, chosen for contrast on white (text 12:1, secondary 7:1, muted 4.6:1, accent 5:1). */
:root[data-theme="light"] {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #eef0f4;
  --line: #e3e6ec;
  --line-2: #d3d7e0;
  --text: #14161c;
  --text-2: #4a5060;
  --muted: #6f7686;
  --accent: #4f46e5;                 /* brand indigo (brand-kit) */
  --accent-2: #332ca8;               /* the slab tone, for hovers and links on white */
  --accent-soft: rgba(79, 70, 229, 0.12);
  --ok: #1f9d68;
  --warn: #b7791f;
  --err: #d64545;
  --user-bubble: #e9ecf5;
  --header: #e5e9f2;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 30px rgba(20, 22, 28, 0.10);
  --on-accent: #fff;
  --hover: rgba(20, 22, 28, 0.04);
  --hover-2: rgba(20, 22, 28, 0.07);
  --scrim: rgba(20, 22, 28, 0.35);
  --pop: #ffffff;
  --term: #fbfbfd;
  --term-text: #2b3040;
  --danger: #d64545;
  --amber: #b7791f;
  --merged: #8250df;
  --inset: rgba(20, 22, 28, 0.05);
  --frame: #fff;
  --page-glow-1: rgba(79, 70, 229, .16);
  --page-glow-2: rgba(31, 157, 104, .10);
  --page-dot: rgba(20, 22, 28, .09);
  color-scheme: light;
}

:root {
  --background: var(--bg); --foreground: var(--text);
  --card: var(--panel); --card-foreground: var(--text);
  --popover: var(--pop); --popover-foreground: var(--text);
  --primary: var(--accent); --primary-foreground: var(--on-accent);
  --secondary: var(--panel-2); --secondary-foreground: var(--text-2);
  --muted-background: var(--panel-2); --muted-foreground: var(--text-2);
  --destructive: var(--danger); --destructive-foreground: var(--on-accent);
  --border: var(--line); --input: var(--line-2); --ring: var(--accent);
  --success: var(--ok); --warning: var(--warn); --info: var(--accent-2);
  --chart-1: var(--accent); --chart-2: var(--ok); --chart-3: var(--warn);
  --chart-4: var(--merged); --chart-5: var(--text-2);
  --nav-bg: color-mix(in srgb, var(--bg) 85%, transparent);
  --code-bg: var(--term); --glow: var(--accent-soft);
}