/* BrainTrust console — DESIGN TOKENS. The one place colour, spacing, radius, type and elevation are defined.
   Light is the default; dark applies when the OS asks for it (prefers-color-scheme) unless the operator pinned a
   theme with the toggle (js/theme.js writes html[data-theme="light"|"dark"]). Every other stylesheet — console.css,
   shell.css and gateway.html — reads these names and never hard-codes a colour.
   Contrast: every text token is ≥ 4.5:1 on --surface and --bg in its theme (WCAG AA); --text-muted is the floor. */
:root{
  /* type */
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px;
  --lh-tight: 1.25; --lh-base: 1.5;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* spacing — a 4px base, 8px rhythm */
  --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  /* motion */
  --ease: cubic-bezier(.2,.8,.2,1); --dur-fast: 120ms; --dur: 180ms;

  /* layout */
  --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --content-max: 1440px;

  /* ── colour: LIGHT ─────────────────────────────────────────────────────────────── */
  color-scheme: light;
  --bg: #f6f7f9;             /* canvas */
  --surface: #ffffff;        /* cards, sidebar, top bar */
  --surface-2: #f2f4f7;      /* hover, subtle fills, table head */
  --surface-sunken: #f9fafb; /* inputs, code, wells */
  --surface-inverse: #101828;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --text: #101828;
  --text-2: #344054;
  --text-muted: #596377;     /* 5.9:1 on white */
  --text-inverse: #ffffff;
  --accent: #4f46e5;         /* primary actions; 6.3:1 with white text */
  --accent-hover: #4338ca;
  --accent-text: #4338ca;    /* links and accent text on surfaces */
  --accent-soft: #eef2ff;
  --accent-ring: rgba(79,70,229,.45);
  --success: #067647; --success-soft: #ecfdf3; --success-border: #abefc6; --success-solid: #17b26a;
  --warning: #b54708; --warning-soft: #fffaeb; --warning-border: #fedf89; --warning-solid: #f79009;
  --danger:  #b42318; --danger-soft:  #fef3f2; --danger-border:  #fecdca; --danger-solid:  #f04438;
  --info:    #175cd3; --info-soft:    #eff8ff; --info-border:    #b2ddff;
  --violet:  #6941c6; --violet-soft:  #f4f3ff;
  --skeleton-a: #eef0f3; --skeleton-b: #f7f8fa;
  --scrim: rgba(16,24,40,.45);
  --chart-grid: #e4e7ec; --chart-surface: #ffffff;
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.04);
  --shadow-lg: 0 12px 24px -6px rgba(16,24,40,.14), 0 4px 8px -4px rgba(16,24,40,.06);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-ring);
}

/* ── colour: DARK (system preference, unless pinned light) ───────────────────────── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg: #0b0d12; --surface: #12151c; --surface-2: #1a1e28; --surface-sunken: #0e1117; --surface-inverse: #f2f4f7;
    --border: #252a36; --border-strong: #343b4c;
    --text: #eceef2; --text-2: #c5cad5; --text-muted: #949db0; --text-inverse: #0b0d12;
    --accent: #5b55f0; --accent-hover: #6d68f5; --accent-text: #a5b0fc; --accent-soft: rgba(99,102,241,.16); --accent-ring: rgba(129,140,248,.6);
    --success: #4fd18b; --success-soft: rgba(23,178,106,.14); --success-border: rgba(23,178,106,.4); --success-solid: #17b26a;
    --warning: #fdb022; --warning-soft: rgba(247,144,9,.14); --warning-border: rgba(247,144,9,.4); --warning-solid: #f79009;
    --danger:  #fd8b80; --danger-soft:  rgba(240,68,56,.14); --danger-border:  rgba(240,68,56,.45); --danger-solid:  #f04438;
    --info:    #7cc0ff; --info-soft:    rgba(46,144,250,.14); --info-border:    rgba(46,144,250,.4);
    --violet:  #b9a5ff; --violet-soft:  rgba(122,90,248,.16);
    --skeleton-a: #1a1e28; --skeleton-b: #232836;
    --scrim: rgba(0,0,0,.6);
    --chart-grid: #252a36; --chart-surface: #12151c;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
    --shadow-md: 0 6px 12px -4px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 32px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0b0d12; --surface: #12151c; --surface-2: #1a1e28; --surface-sunken: #0e1117; --surface-inverse: #f2f4f7;
  --border: #252a36; --border-strong: #343b4c;
  --text: #eceef2; --text-2: #c5cad5; --text-muted: #949db0; --text-inverse: #0b0d12;
  --accent: #5b55f0; --accent-hover: #6d68f5; --accent-text: #a5b0fc; --accent-soft: rgba(99,102,241,.16); --accent-ring: rgba(129,140,248,.6);
  --success: #4fd18b; --success-soft: rgba(23,178,106,.14); --success-border: rgba(23,178,106,.4); --success-solid: #17b26a;
  --warning: #fdb022; --warning-soft: rgba(247,144,9,.14); --warning-border: rgba(247,144,9,.4); --warning-solid: #f79009;
  --danger:  #fd8b80; --danger-soft:  rgba(240,68,56,.14); --danger-border:  rgba(240,68,56,.45); --danger-solid:  #f04438;
  --info:    #7cc0ff; --info-soft:    rgba(46,144,250,.14); --info-border:    rgba(46,144,250,.4);
  --violet:  #b9a5ff; --violet-soft:  rgba(122,90,248,.16);
  --skeleton-a: #1a1e28; --skeleton-b: #232836;
  --scrim: rgba(0,0,0,.6);
  --chart-grid: #252a36; --chart-surface: #12151c;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 6px 12px -4px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 32px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
}

/* LEGACY NAMES — the ported screens (and their inline styles) say var(--card), var(--mut) …; they resolve to tokens. */
:root{
  --card: var(--surface); --fg: var(--text); --mut: var(--text-muted); --acc: var(--accent-text); --bd: var(--border);
  --ok: var(--success); --warn: var(--warning); --err: var(--danger);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0ms; --dur: 0ms; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}