/* VINS AI design tokens — one place for colour, type, spacing and radius.
   Breakpoints (used in layout.css and page CSS):
     ≥1440 desktop · 1024–1439 laptop · 768–1023 tablet · <768 phone */
:root {
  /* surfaces & ink */
  --bg: #F3F6FD;
  --card: #FFFFFF;
  --ink: #0E1A3A;
  --ink2: #34426A;
  --muted: #5B6A8F;
  --line: #E1E7F4;
  --soft: #ECF1FB;

  /* brand */
  --navy: #14308F;
  --navy2: #1E48CC;
  --blue: #1F4FD6;
  --blue-bg: #E7EEFF;
  --sun: #FFC629;
  --sun-bg: #FFF6D9;

  /* one colour per capability (same meaning on every screen) */
  --gen: #6A4CF5;   --gen-bg: #EFEBFF;
  --scene: #8B3FD9; --scene-bg: #F5EDFF;
  --seg: #1F4FD6;   --seg-bg: #E7EEFF;
  --enr: #0BA39A;   --enr-bg: #DDF5F2; --enr-ink: #0A7A6E;
  --gaze: #F59E0B;  --gaze-bg: #FFF2DC; --gaze-ink: #B45F00;

  /* status */
  --ok: #16A34A;   --ok-bg: #DCFCE7;  --ok-ink: #15803D;
  --warn: #B45309; --warn-bg: #FEF3C7;
  --bad: #DC2626;  --bad-bg: #FEE2E2;

  /* chart series — validated categorical order: Segment → Enrich → Generate → Focus → Scenes */
  --s1: #1F4FD6; --s2: #0BA39A; --s3: #6A4CF5; --s4: #F59E0B; --s5: #8B3FD9;
  --grid: #EEF1F7; --axis: #8A96B4;

  /* type */
  --font: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --disp: 'Outfit', 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;

  /* shape */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px;
  --shadow: 0 1px 2px rgba(20,48,143,.04), 0 10px 28px rgba(20,48,143,.06);
  --shadow-lg: 0 18px 40px rgba(20,48,143,.16);

  /* layout */
  --side-w: 264px;
  --side-rail: 76px;
  --top-h: 72px;
  --gutter: 28px;
}
@media (max-width: 1023px) { :root { --gutter: 20px; --top-h: 64px; } }
@media (max-width: 767px)  { :root { --gutter: 16px; --top-h: 58px; } }