/* ==========================================================================
   5Region Console — design tokens
   One accent (5Region red), neutral surfaces, hairline borders.
   Theme is always resolved to an explicit [data-theme] by the boot script.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Type */
  --font-sans: "Inter", "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-serif: "Georgia", "PT Serif", "Times New Roman", serif;

  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-md: 14.5px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 23px;
  --fs-3xl: 30px;

  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* Space (4px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* Surfaces */
  --bg: #f6f6f4;            /* app canvas */
  --bg-sidebar: #f1f1ee;
  --surface: #ffffff;       /* content plane */
  --surface-2: #f7f7f5;     /* subtle fill: table header, inputs at rest */
  --surface-3: #efefec;     /* hover fill */
  --surface-inverse: #18181a;
  --overlay: rgba(20, 20, 22, 0.42);

  /* Lines */
  --line: #e7e6e2;
  --line-strong: #d7d6d1;
  --line-soft: #efeeea;

  /* Text */
  --text: #18181a;
  --text-2: #4f4f57;
  --text-3: #85858e;
  --text-4: #a9a9b0;
  --text-inverse: #fafafa;

  /* Accent: 5Region red — primary action, active nav, brand only */
  --accent: #d4202a;
  --accent-hover: #b81a23;
  --accent-press: #a1151d;
  --accent-soft: rgba(212, 32, 42, 0.075);
  --accent-soft-2: rgba(212, 32, 42, 0.14);
  --accent-text: #c01b24;
  --on-accent: #ffffff;

  /* Focus (kept distinct from accent so it never reads as an error) */
  --focus: #2a78d6;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(42, 120, 214, 0.55);

  /* Semantic */
  --ok: #138a3e;
  --ok-dot: #1aa64e;
  --ok-soft: rgba(26, 166, 78, 0.10);
  --warn: #a1620a;
  --warn-dot: #e5a00d;
  --warn-soft: rgba(229, 160, 13, 0.13);
  --err: #c42b2b;
  --err-dot: #e0413b;
  --err-soft: rgba(224, 65, 59, 0.10);
  --info: #22609f;
  --info-dot: #2a78d6;
  --info-soft: rgba(42, 120, 214, 0.10);
  --violet: #5b4bc4;
  --violet-soft: rgba(91, 75, 196, 0.10);

  /* Data viz (validated reference palette; series ≠ accent) */
  --viz-1: #2a78d6;
  --viz-1-soft: rgba(42, 120, 214, 0.12);
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
  --viz-muted: #c9c8c3;
  --viz-grid: #ecebe7;
  --viz-axis: #9a9aa2;
  --viz-seq-1: #184f95;
  --viz-seq-2: #2a78d6;
  --viz-seq-3: #6da7ec;
  --viz-seq-4: #b7d3f6;

  /* Elevation — restrained */
  --shadow-xs: 0 1px 0 rgba(20, 20, 22, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 20, 22, 0.06), 0 0 0 1px rgba(20, 20, 22, 0.02);
  --shadow-pop: 0 8px 24px -6px rgba(20, 20, 22, 0.16), 0 2px 6px rgba(20, 20, 22, 0.06), 0 0 0 1px rgba(20, 20, 22, 0.06);
  --shadow-dialog: 0 24px 64px -12px rgba(20, 20, 22, 0.28), 0 0 0 1px rgba(20, 20, 22, 0.06);

  /* Layout */
  --sidebar-w: 236px;
  --rail-w: 60px;
  --topbar-h: 52px;
  --tabbar-h: 60px;
  --content-max: 1360px;
  --gutter: 28px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t: 180ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e0e10;
  --bg-sidebar: #0b0b0d;
  --surface: #141416;
  --surface-2: #19191c;
  --surface-3: #212125;
  --surface-inverse: #f2f2f3;
  --overlay: rgba(0, 0, 0, 0.6);

  --line: #26262b;
  --line-strong: #33333a;
  --line-soft: #1f1f23;

  --text: #ececee;
  --text-2: #b1b1b9;
  --text-3: #7c7c86;
  --text-4: #5b5b64;
  --text-inverse: #141416;

  --accent: #e5383f;
  --accent-hover: #f04f55;
  --accent-press: #d02a31;
  --accent-soft: rgba(240, 79, 85, 0.11);
  --accent-soft-2: rgba(240, 79, 85, 0.2);
  --accent-text: #ff6b70;
  --on-accent: #ffffff;

  --focus: #5598e7;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(85, 152, 231, 0.6);

  --ok: #4cc77a;
  --ok-dot: #3fbf6e;
  --ok-soft: rgba(63, 191, 110, 0.13);
  --warn: #f0b443;
  --warn-dot: #f0a92a;
  --warn-soft: rgba(240, 169, 42, 0.13);
  --err: #ff6d66;
  --err-dot: #f0524b;
  --err-soft: rgba(240, 82, 75, 0.13);
  --info: #7cb3f2;
  --info-dot: #3987e5;
  --info-soft: rgba(57, 135, 229, 0.15);
  --violet: #a79df0;
  --violet-soft: rgba(144, 133, 233, 0.15);

  --viz-1: #3987e5;
  --viz-1-soft: rgba(57, 135, 229, 0.16);
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-muted: #4a4a52;
  --viz-grid: #222226;
  --viz-axis: #6e6e78;
  --viz-seq-1: #86b6ef;
  --viz-seq-2: #3987e5;
  --viz-seq-3: #256abf;
  --viz-seq-4: #184f95;

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-dialog: 0 28px 72px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
}