/* Holarch design tokens (loaded first). Brand from the app icon: navy #24335f → teal #0e4a59, teal #8fdbe0 for selection,
   amber #f2a93b for AI only (as a fill with navy text). Legacy names (--accent, --panel, --line, --muted, --bar…) are aliases
   so existing views pick up the new language without edits. Type scale 12/13/14/16/20/28, spacing 4/8/12/16/24/32,
   radii 4 (small) / 6 (controls) / 8 (cards). Density: :root[data-density=compact] tightens rows, controls and padding. */
:root {
  /* brand */
  --brand-900: #0f1a33; --brand-800: #24335f; --brand-700: #0e4a59; --brand-300: #8fdbe0; --amber: #f2a93b;
  --rail-bg: linear-gradient(180deg, #24335f, #0e4a59); --rail-text: #d3dceb; --rail-text-strong: #ffffff; --rail-text-2: #cfd8e6; --rail-hot: #ff958a; --rail-hover: rgba(255, 255, 255, .08); --rail-sel: rgba(143, 219, 224, .18);
  /* surfaces and text */
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef2f6; --surface-3: #e3e9f0;
  --border: #d5dde7; --border-strong: #b6c2d1;
  --text: #16213a; --text-2: #44526d; --text-3: #56657f;
  --link: #0e4a59; --primary: #24335f; --primary-ink: #ffffff; --primary-hover: #1b2850;
  --sel-bg: #dcf3f4; --sel-edge: #0e4a59; --hover-bg: #edf1f6;
  --focus-halo: rgba(143, 219, 224, .55);
  /* semantic (≥4.5:1 as text on surface) */
  --ok: #1d7a46; --ok-bg: #e3f4ea; --warn: #8a5300; --warn-bg: #fcf0d9; --danger: #b42318; --danger-bg: #fde8e6; --info: #0e4a59; --info-bg: #e0f1f3;
  --shadow-pop: 0 12px 32px rgba(15, 26, 51, .18), 0 2px 6px rgba(15, 26, 51, .08);
  /* text on fills: --on-fill on saturated/data colours (class badges, toasts, tips), --on-status on --ok/--warn/--danger fills;
     strong alert fills that keep white text in both themes */
  --on-fill: #ffffff; --on-status: #ffffff; --danger-fill: #b3261e;
  /* type, spacing, shape */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --lh: 20px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-sm: 4px; --r-ctl: 6px; --r-card: 8px; --r-pill: 999px;
  --row-h: 40px; --ctl-h: 32px; --pad: 16px; --gap: 16px;
  --topbar-h: 44px; --rail-w: 232px; --rail-icons-w: 52px; --tabs-h: 34px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* legacy aliases used across the views */
  --bar: #24335f; --bar-2: #1b2850;
  --accent: #0e4a59; --accent-2: #dcf3f4;
  --panel: #ffffff; --panel-2: #f6f8fb; --input-bg: #ffffff; --hover: #f3f6fa;
  --muted: #56657f; --line: #d5dde7; --line-2: #e8edf3; --line-strong: #b6c2d1;
  --focus: #0e4a59;
  --chip-bg: #eef2f6; --chip-line: #d5dde7; --chip-text: #3b4a60;
  --danger-line: #f1c3be;
  --canvas-bg: #fbfcfe; --canvas-dot: #dfe5ee;
  --shadow: 0 4px 18px rgba(15, 26, 51, .14);
  --radius: 6px;
}
:root[data-theme=dark] {
  --rail-bg: linear-gradient(180deg, #0f1a33, #0b2a35); --rail-text: #c9d4e6;
  --bg: #0c1529; --surface: #132039; --surface-2: #1a2a49; --surface-3: #22345a;
  --border: #2a3b60; --border-strong: #3b4f7a;
  --text: #e9eef7; --text-2: #b9c5d8; --text-3: #9dabc2;
  --link: #8fdbe0; --primary: #8fdbe0; --primary-ink: #0f1a33; --primary-hover: #a9e5e9;
  --sel-bg: #1d3a52; --sel-edge: #8fdbe0; --hover-bg: #1c2c4c;
  --focus-halo: rgba(143, 219, 224, .35);
  --ok: #6fd69a; --ok-bg: rgba(111, 214, 154, .14); --warn: #f4c46e; --warn-bg: rgba(244, 196, 110, .14); --danger: #ff958a; --danger-bg: rgba(255, 149, 138, .14); --info: #8fdbe0; --info-bg: rgba(143, 219, 224, .14);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --on-status: #0f1a33;

  --bar: #0f1a33; --bar-2: #1a2742;
  --accent: #3fa9b2; --accent-2: #1d3a52;
  --panel: #132039; --panel-2: #172540; --input-bg: #0f1b31; --hover: #1c2c4c;
  --muted: #9dabc2; --line: #2a3b60; --line-2: #22314f; --line-strong: #3b4f7a;
  --focus: #8fdbe0;
  --chip-bg: #22345a; --chip-line: #3b4f7a; --chip-text: #c8d3e3;
  --danger-line: #6b3530;
  --canvas-bg: #f4f6fa; --canvas-dot: #d6dde8;
  --shadow: 0 6px 22px rgba(0, 0, 0, .5);
}
:root[data-density=compact] { --row-h: 30px; --ctl-h: 28px; --pad: 10px; --gap: 10px; --tabs-h: 30px; }