/* Design tokens. Light is the default; dark follows the OS unless the user
   picks a theme (data-theme on <html>). Calm neutrals, one accent, status
   colours reserved for meaning. */

:root {
  color-scheme: light;

  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --fs-badge: 10px; /* numerals inside 18px count and marker badges only */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-22: 22px;
  --fs-26: 26px;
  --fs-30: 30px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  --header-h: 52px;

  /* Type roles. Sizes come only from the --fs scale above; 11px is the floor. */
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --tracking-eyebrow: 0.06em;
  --tracking-title: -0.012em;

  /* Controls: one height ladder for buttons, inputs, segments and viewer chrome. */
  --control-h-xs: 24px;
  --control-h-sm: 28px;
  --control-h: 32px;
  --control-h-md: 34px;
  --control-h-lg: 40px;
  --icon-sm: 14px;
  --icon: 16px;

  /* Layering */
  --z-chrome: 5;
  --z-sticky: 10;
  --z-popover: 40;
  --z-banner: 50;
  --z-toast: 60;

  /* Neutrals: warm paper */
  --bg: #f6f6f3;
  --bg-sunk: #efefeb;
  --surface: #ffffff;
  --surface-2: #f9f9f7;
  --surface-hover: #f2f2ee;
  --surface-active: #ebebe6;
  --border: #e3e2dd;
  --border-strong: #d2d1cb;
  --hairline: rgba(20, 20, 15, 0.07);
  --border-input: #8f8e87; /* 3.3:1 on --surface (WCAG 1.4.11) */

  --text: #1b1b19;
  --text-2: #55554f;
  --text-3: #6b6a63; /* 5.0:1 on --bg, AA at 11-12px */
  --text-inverse: #ffffff;

  /* Accent: blueprint blue */
  --accent: #2b59e8;
  --accent-hover: #2149c9;
  --accent-text: #2149c9;
  --accent-soft: #eaf0ff;
  --accent-border: #c5d4fd;
  --focus: rgba(43, 89, 232, 0.35);

  /* Status */
  --ok: #18794e;
  --ok-soft: #e7f5ec;
  --ok-border: #bfe3cd;
  --warn: #9a5b00;
  --warn-strong: #d98a00;
  --warn-soft: #fff5e0;
  --warn-border: #f5d79e;
  --fail: #c62a2f;
  --fail-strong: #e5484d;
  --fail-soft: #fdecec;
  --fail-border: #f6c4c5;
  --info: #2b59e8;

  /* Numerals and glyphs drawn on a severity fill (finding badges, model
     markers): each pair is at least 4.5:1. */
  --sev-info-fill: var(--accent);
  --sev-info-on: #ffffff;
  --sev-warn-fill: #d98a00;
  --sev-warn-on: #1b1b19;
  --sev-fail-fill: #c62a2f;
  --sev-fail-on: #ffffff;

  /* Axes (CAD convention) */
  --axis-x: #e5484d;
  --axis-y: #2f9e5b;
  --axis-z: #2b59e8;

  /* Viewer */
  --viewer-bg-1: #f3f3f0;
  --viewer-bg-2: #e6e6e1;

  --shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.06);
  --shadow: 0 1px 2px rgba(20, 20, 15, 0.05), 0 4px 12px rgba(20, 20, 15, 0.06);
  --shadow-lg: 0 2px 6px rgba(20, 20, 15, 0.06), 0 16px 40px rgba(20, 20, 15, 0.12);
  --overlay-bg: rgba(255, 255, 255, 0.82);

  /* Viewer chrome: every control floating on the canvas uses these. */
  --chrome-bg: rgba(255, 255, 255, 0.9);
  --chrome-border: rgba(20, 20, 15, 0.1);
  --chrome-shadow: 0 1px 2px rgba(20, 20, 15, 0.06), 0 2px 8px rgba(20, 20, 15, 0.06);
  --chrome-active: rgba(20, 20, 15, 0.08);

  /* Focus: a solid 2px accent ring, offset from the control. */
  --focus-ring-color: var(--accent);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111113;
    --bg-sunk: #0c0c0d;
    --surface: #18181b;
    --surface-2: #1c1c20;
    --surface-hover: #222227;
    --surface-active: #2a2a30;
    --border: #2a2a30;
    --border-strong: #3a3a42;
    --hairline: rgba(255, 255, 255, 0.06);
    --border-input: #686872;
    --text: #ececee;
    --text-2: #a5a5ad;
    --text-3: #8b8b94;
    --text-inverse: #0b0b0c;
    --accent: #6d8dff;
    --accent-hover: #87a1ff;
    --accent-text: #93abff;
    --accent-soft: rgba(109, 141, 255, 0.12);
    --accent-border: rgba(109, 141, 255, 0.35);
    --focus: rgba(109, 141, 255, 0.45);
    --ok: #4cc38a;
    --ok-soft: rgba(76, 195, 138, 0.12);
    --ok-border: rgba(76, 195, 138, 0.3);
    --warn: #f1b34b;
    --warn-strong: #f1b34b;
    --warn-soft: rgba(241, 179, 75, 0.11);
    --warn-border: rgba(241, 179, 75, 0.3);
    --fail: #ff6b6f;
    --fail-strong: #ff6b6f;
    --fail-soft: rgba(255, 107, 111, 0.11);
    --fail-border: rgba(255, 107, 111, 0.32);
    --info: #6d8dff;
    --sev-info-fill: var(--accent);
    --sev-info-on: #0b0b0c;
    --sev-warn-fill: #f1b34b;
    --sev-warn-on: #1b1300;
    --sev-fail-fill: #ff6b6f;
    --sev-fail-on: #0b0b0c;
    --axis-x: #ff6b6f;
    --axis-y: #4cc38a;
    --axis-z: #6d8dff;
    --viewer-bg-1: #1b1b1f;
    --viewer-bg-2: #131315;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.4), 0 18px 48px rgba(0, 0, 0, 0.5);
    --overlay-bg: rgba(24, 24, 27, 0.8);
    --chrome-bg: rgba(28, 28, 32, 0.88);
    --chrome-border: rgba(255, 255, 255, 0.09);
    --chrome-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --chrome-active: rgba(255, 255, 255, 0.1);
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111113;
  --bg-sunk: #0c0c0d;
  --surface: #18181b;
  --surface-2: #1c1c20;
  --surface-hover: #222227;
  --surface-active: #2a2a30;
  --border: #2a2a30;
  --border-strong: #3a3a42;
  --hairline: rgba(255, 255, 255, 0.06);
  --border-input: #686872;
  --text: #ececee;
  --text-2: #a5a5ad;
  --text-3: #8b8b94;
  --text-inverse: #0b0b0c;
  --accent: #6d8dff;
  --accent-hover: #87a1ff;
  --accent-text: #93abff;
  --accent-soft: rgba(109, 141, 255, 0.12);
  --accent-border: rgba(109, 141, 255, 0.35);
  --focus: rgba(109, 141, 255, 0.45);
  --ok: #4cc38a;
  --ok-soft: rgba(76, 195, 138, 0.12);
  --ok-border: rgba(76, 195, 138, 0.3);
  --warn: #f1b34b;
  --warn-strong: #f1b34b;
  --warn-soft: rgba(241, 179, 75, 0.11);
  --warn-border: rgba(241, 179, 75, 0.3);
  --fail: #ff6b6f;
  --fail-strong: #ff6b6f;
  --fail-soft: rgba(255, 107, 111, 0.11);
  --fail-border: rgba(255, 107, 111, 0.32);
  --info: #6d8dff;
  --sev-info-fill: var(--accent);
  --sev-info-on: #0b0b0c;
  --sev-warn-fill: #f1b34b;
  --sev-warn-on: #1b1300;
  --sev-fail-fill: #ff6b6f;
  --sev-fail-on: #0b0b0c;
  --axis-x: #ff6b6f;
  --axis-y: #4cc38a;
  --axis-z: #6d8dff;
  --viewer-bg-1: #1b1b1f;
  --viewer-bg-2: #131315;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.4), 0 18px 48px rgba(0, 0, 0, 0.5);
  --overlay-bg: rgba(24, 24, 27, 0.8);
  --chrome-bg: rgba(28, 28, 32, 0.88);
  --chrome-border: rgba(255, 255, 255, 0.09);
  --chrome-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --chrome-active: rgba(255, 255, 255, 0.1);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}