/* ============================================================
   Infrasight Design System v1 (IDS v1) — Design Tokens
   SINGLE SOURCE OF TRUTH. Consumed by the portal (index.html)
   AND the 3D viewer pages. Edit a value here → both update.
   Canonical spec: docs/DESIGN_SYSTEM.md
   ============================================================ */
:root {
  /* Layout */
  --touch-min: 44px;
  --sidebar-width-mobile: 0px;
  --drawer-width: min(280px, 80vw);
  --modal-width-default: min(450px, 95vw);
  --modal-width-wide: min(1200px, 95vw);

  /* Brand (canonical 5) */
  --white: #FFFFFF;
  --light-gray: #D8D8D8;
  --dark-blue: #385672;
  --accent-blue: #1F7DAD;
  --black: #000000;

  /* Severity — data-bearing only */
  --severity-1: #c0392b;
  --severity-2: #e67e22;
  --severity-3: #2980b9;
  --severity-4: #27ae60;

  /* Light-theme surface stack */
  --bg: #d4d8de;
  --surface: #d9dde3;
  --surface-alt: #cfd3d9;
  --surface-subtle: #c6cad1;
  --surface-tinted: #e5eaf0;
  --surface-hover: #cfd3d9;
  --border: rgba(40,60,82,0.22);
  --border-subtle: rgba(40,60,82,0.12);
  --divider: rgba(40,60,82,0.12);

  /* Text */
  --text-primary: #385672;
  --text-body: #2b3a4a;
  --text-secondary: #5d6773;
  --text-muted: #7a8592;
  --text-tertiary: #a1a8b2;
  --text-dim: #5d6773;

  /* Chrome */
  --sidebar-bg: #385672;
  --sidebar-width: 240px;
  --chrome-h: 56px;
  --table-header-bg: #cfd3d9;

  /* Typography (NEW — so font choice also auto-propagates) */
  --font-ui: 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-condensed: 'Roboto Condensed', sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-tactile: 200ms;
  --dur-color: 280ms;
  --dur-glow: 350ms;

  /* Radii */
  --r-card: 10px;
  --r-button: 8px;
  --r-input: 8px;
  --r-chip: 5px;
  --r-pill: 999px;
  --r-bar: 3px;
}

[data-theme="dark"] {
  /* Brand inverts where it makes sense; cyan-shift for legibility */
  --white: #1c1c1e;
  --light-gray: #35353a;
  --dark-blue: #a1a1a8;
  --accent-blue: #38bdf8;
  --black: #e4e4e7;

  /* Surfaces */
  --bg: #121214;
  --surface: #1c1c1e;
  --surface-alt: #242428;
  --surface-subtle: #171719;
  --surface-tinted: #2a2a2e;
  --surface-hover: #242428;
  --border: #2a2a2e;
  --border-subtle: #232327;
  --divider: #232327;

  /* Text */
  --text-primary: #e4e4e7;
  --text-body: #e4e4e7;
  --text-secondary: #a1a1a8;
  --text-muted: #71717a;
  --text-tertiary: #52525b;
  --text-dim: #a1a1a8;

  /* Chrome */
  --sidebar-bg: #0a0a0c;
  --table-header-bg: #1c1c1e;
}