/* ── The Brain design tokens ─────────────────────────────────────────────────
   One palette for the whole platform (Shawarmer burgundy, saffron accent, Readex Pro).
   The general-purpose tokens are aliases of the --tb-* palette, so every view
   (rail, Home, Ask The Brain, admin, dialogs) follows it from one place. */
:root {
  --tb-brand: #72253D;
  --tb-brand-hover: #86304C;
  --tb-brand-deep: #5E1B31;
  --tb-ink: #2A0B16;
  --tb-ink-2: #3A1221;
  --tb-spice: #F2B33D;
  --tb-on-ink: #F6EBEE;
  --tb-on-ink-dim: #C9AEB7;
  --tb-rail-hover: rgba(255, 255, 255, .07);
  --tb-rail-active: rgba(242, 179, 61, .14);
  --tb-bg: #F5F2F3;
  --tb-surface: #FFFFFF;
  --tb-sunk: #EFE9EB;
  --tb-fg: #1F1418;
  --tb-muted: #6B5960;
  --tb-line: #E3D8DC;
  --tb-s-cur: #9B3558;
  --tb-s-cmp: #A07A12;
  --tb-bar: #9B3558;
  --tb-bar-soft: #E9D7DD;
  --tb-good: #2E7D4F; --tb-good-soft: #E3F1E8;
  --tb-warn: #9A6200; --tb-warn-soft: #F8EDD6;
  --tb-bad: #B3261E; --tb-bad-soft: #F8E1DF;
  --tb-info: #3B5C86; --tb-info-soft: #E3EAF4;
  --tb-link: #72253D;
  --tb-brand-text: #72253D;   /* brand-coloured text/icons on surfaces (fills use --tb-brand) */
  --tb-brand-tint: #F6EEF1;   /* solid brand-tinted surface */
  --tb-brand-wash: rgba(114, 37, 61, .08);
  --tb-subtle: #FAF7F8;       /* table heads, panel headers/footers */
  --tb-on-fill: #FFFFFF;      /* text on --tb-bad / --tb-good fills */
  --tb-bad-fill: #B3261E;
  --tb-ask-field: rgba(255, 255, 255, .96);
  --tb-placeholder: #8B777F;
  --tb-f: "Readex Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
  --tb-r-lg: 16px;
  --tb-r-md: 12px;
  --tb-r-sm: 8px;

  --brand-primary: var(--tb-brand);
  --brand-text: var(--tb-brand-text);
  --brand-primary-deep: var(--tb-brand-deep);
  --brand-accent: var(--tb-spice);
  --brand-font: var(--tb-f);

  --ink: var(--tb-ink);
  --ink-2: var(--tb-ink-2);
  --ink-line: rgba(255, 255, 255, .1);
  --ink-text: var(--tb-on-ink);
  --ink-muted: var(--tb-on-ink-dim);

  --bg: var(--tb-bg);
  --surface: var(--tb-surface);
  --line: var(--tb-line);
  --line-soft: var(--tb-sunk);
  --text: var(--tb-fg);
  --text-2: #4A3A40;
  --text-3: var(--tb-muted);
  --text-1: var(--tb-fg);
  --surface-2: var(--tb-sunk);
  --surface-3: #E9E1E4;
  --surface-card: var(--tb-surface);
  --bg-card: var(--tb-surface);
  --bg-hover: rgba(114, 37, 61, .06);
  --line-strong: #D9CBD0;
  --line-active: rgba(114, 37, 61, .35);
  --border-color: var(--tb-line);
  --font-mono: var(--mono);
  --r-md: var(--tb-r-md);

  --ok-bg: var(--tb-good-soft);
  --ok-fg: var(--tb-good);
  --warn: var(--tb-warn);
  --warn-bg: var(--tb-warn-soft);
  --danger: var(--tb-bad);
  --danger-bg: var(--tb-bad-soft);
  --danger-fill: var(--tb-bad-fill);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-full: 999px;
  --sidebar-w: 248px;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

/* Dark appearance. js/theme.js resolves the user's choice (System / Light / Dark) to
   data-theme on <html> before first paint, so only the resolved value is matched here.
   The rail keeps its burgundy ink in both modes; everything else follows these tokens. */
:root[data-theme="dark"] {
  --tb-brand: #9B3558;
  --tb-brand-hover: #AA4265;
  --tb-brand-deep: #72253D;
  --tb-bg: #141012;
  --tb-surface: #1C1619;
  --tb-sunk: #241C20;
  --tb-fg: #F1E8EB;
  --tb-muted: #AE9AA2;
  --tb-line: #352A2F;
  --tb-s-cur: #BF5A79;
  --tb-s-cmp: #B08A2A;
  --tb-bar: #BF5A79;
  --tb-bar-soft: #3A2830;
  --tb-good: #6FCB93; --tb-good-soft: #1C2F24;
  --tb-warn: #E5B04F; --tb-warn-soft: #33281A;
  --tb-bad: #F08A80; --tb-bad-soft: #3A2120;
  --tb-info: #93B4E0; --tb-info-soft: #1D2838;
  --tb-link: #F2B33D;
  --tb-brand-text: #E893AE;
  --tb-brand-tint: #2E1D24;
  --tb-brand-wash: rgba(232, 147, 174, .1);
  --tb-subtle: #191416;
  --tb-on-fill: #1A1215;
  --tb-bad-fill: #F08A80;
  --tb-ask-field: rgba(28, 22, 25, .94);
  --tb-placeholder: #8E7A82;

  --text-2: #D6C7CC;
  --surface-3: #2C2328;
  --bg-hover: rgba(232, 147, 174, .08);
  --line-strong: #463940;
  --line-active: rgba(232, 147, 174, .45);
  color-scheme: dark;
}

/* Swapping themes recolours everything at once instead of letting each component's
   own colour transition run at its own speed. */
:root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--brand-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; font-size: inherit; cursor: pointer; transition: all 0.15s ease; }
input, select, textarea { font-family: inherit; font-size: inherit; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--tb-spice); outline-offset: 2px; }