/* AI Factory design tokens — the ONE place colours, type, radii, shadows and z-layers are defined.
 *
 * Dark is the default; `html.light` flips every semantic token. Nothing below this block should
 * ever need a `!important`: components reference tokens, tokens reference the theme.
 *
 * The two legacy vocabularies (`--a-*` from the maud agent shell, `--cb-*` from the React
 * islands) are ALIASES of the semantic set at the bottom of this file, so existing templates keep
 * working while they migrate to the semantic names. New code uses the semantic names only.
 */

:root {
  color-scheme: dark;

  /* ── Brand (does not flip) ─────────────────────────────────────────────── */
  --brand-navy: #0F596E;
  --brand-teal: #0097B1;
  --brand-orange: #EB6012;
  --brand-orange-2: #F59B5B;
  --brand-glow: #3FD0E0;          /* focus ring + "you are here" accent on dark */

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --bg: #0b1218;                  /* page */
  --surface: #0f1a21;             /* cards, panes */
  --surface-2: #121f27;           /* nested cards, popovers */
  --surface-3: #0d161c;           /* toolbars, tab strips */
  --inset: rgba(0, 0, 0, .28);    /* wells, code gutters */
  --input-bg: #0e161d;
  --code-bg: #0a0f14;
  --hover: rgba(255, 255, 255, .05);
  --selected: rgba(63, 208, 224, .12);

  /* ── Lines ─────────────────────────────────────────────────────────────── */
  --border: rgba(255, 255, 255, .08);
  --border-2: rgba(255, 255, 255, .14);
  --border-3: rgba(255, 255, 255, .22);

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --text: #e6f0f2;                /* primary */
  --text-2: #cddde2;              /* body */
  --text-3: #bcd4da;              /* secondary labels */
  --muted: #7fa3ac;               /* ≥4.5:1 on --surface */
  --faint: #7d9aa2;               /* timestamps, hints — still AA at 11px */
  --heading: #9fb3c8;

  /* ── Status ────────────────────────────────────────────────────────────── */
  --ok: #7ee2a8;
  --ok-bg: rgba(126, 226, 168, .12);
  --warn: #ffd9a8;
  --warn-2: #cbb89f;
  --warn-bg: rgba(255, 217, 168, .12);
  --danger: #fecaca;
  --danger-2: #fecdd3;
  --danger-bg: rgba(254, 202, 202, .12);
  --info: #7fe0ee;
  --info-bg: rgba(127, 224, 238, .12);
  --accent: var(--brand-glow);
  --link: #7fe0ee;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* ── Shape ─────────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .5);

  /* ── Layers ────────────────────────────────────────────────────────────── */
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-popover: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --nav-h: 48px;
  --content-max: 1280px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

html.light {
  color-scheme: light;

  --brand-glow: #0F596E;

  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --inset: #f1f5f9;
  --input-bg: #ffffff;
  --code-bg: #0f172a;
  --hover: #f1f5f9;
  --selected: rgba(15, 89, 110, .10);

  --border: #e2e8f0;
  --border-2: #cbd5e1;
  --border-3: #94a3b8;

  --text: #0f172a;
  --text-2: #1e293b;
  --text-3: #475569;
  --muted: #64748b;
  --faint: #64748b;
  --heading: #334155;

  --ok: #15803d;
  --ok-bg: #ecfdf5;
  --warn: #9a3412;
  --warn-2: #b45309;
  --warn-bg: #fff7ed;
  --danger: #b91c1c;
  --danger-2: #be123c;
  --danger-bg: #fef2f2;
  --info: #0e7490;
  --info-bg: #ecfeff;
  --link: #0097B1;

  --shadow-1: 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-2: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px -12px rgba(15, 23, 42, .16);
  --shadow-pop: 0 12px 40px rgba(15, 23, 42, .18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
.mono, code, kbd, pre { font-family: var(--font-mono); }
a { color: var(--link); }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Legacy aliases (agent shell `--a-*`) ────────────────────────────────── */
:root {
  --a-ink: var(--text);
  --a-ink2: var(--text-2);
  --a-dim: var(--text-3);
  --a-mut: var(--muted);
  --a-faint: var(--faint);
  --a-rail: var(--surface-3);
  --a-rail2: var(--surface-2);
  --a-surf: var(--hover);
  --a-inset: var(--inset);
  --a-line: var(--border);
  --a-line2: var(--border-2);
  --a-amber: var(--warn);
  --a-amber2: var(--warn-2);
  --a-panel: var(--surface);
  --a-green: var(--ok);
  --a-teal: var(--info);
  --a-red: var(--danger);
  --a-red2: var(--danger-2);
  --brand-intraffic: var(--brand-glow);
  --navy: var(--brand-navy);
  --teal: var(--brand-teal);
  --orange: var(--brand-orange);
}

/* ── Legacy aliases (React islands `--cb-*`) ─────────────────────────────── */
#cerberus-root, #whiteboard-root, #bs-mount {
  --cb-bg: var(--bg);
  --cb-surface: var(--surface);
  --cb-surface-2: var(--surface-2);
  --cb-surface-3: var(--surface-3);
  --cb-input-bg: var(--input-bg);
  --cb-code-bg: var(--code-bg);
  --cb-border: var(--border-2);
  --cb-border-2: var(--border);
  --cb-border-3: var(--border);
  --cb-text: var(--text-2);
  --cb-text-strong: var(--text);
  --cb-text-2: var(--text-2);
  --cb-text-3: var(--text-3);
  --cb-text-muted: var(--muted);
  --cb-text-faint: var(--faint);
  --cb-head: var(--heading);
  --cb-hover: var(--hover);
  --cb-panel: var(--surface-2);
  --cb-bg-1: var(--surface-3);
  --cb-danger: var(--danger);
  --cb-accent: var(--accent);
}