/* InterAsset design tokens. Source of truth: docs/01_DESIGN_SPEC.md.
   Component CSS references these; never hard-code colours or sizes elsewhere. */

:root {
  /* Neutrals and brand */
  --navy-900: #0E1B3A;
  --navy-800: #182B55;
  --navy-700: #223A6E;
  --ink: #0F2247;
  --ink-2: #3C4A62;
  --muted: #6B7A90;
  --line: #E4E9F1;
  --surface: #FFFFFF;
  --surface-2: #F4F7FB;

  --blue-600: #2467E3;
  --blue-700: #1A52C4;
  --blue-100: #E8F0FE;
  --blue-mark-hi: #4F8DF7;

  --green-600: #1E8A4C;
  --green-100: #E3F6EA;
  --amber-600: #B7791F;
  --amber-100: #FDF3DF;
  --red-600: #C53030;
  --red-100: #FDE8E8;
  --purple-100: #EFE9FD;
  --purple-600: #6D45C8;
  --grey-chip-bg: #EEF1F5;
  --grey-chip-fg: #5B6B82;

  /* Asset classes */
  --c-water: #2D8CFF;
  --c-storm: #3DBE6C;
  --c-sanitary: #F5A623;
  --c-node: #B583F5;
  --c-facility: #1B2D55;
  --c-bridge: #6D28D9;
  --c-road: #64748B;
  --c-dam: #0F766E;
  --c-boundary: #9AA8BC;
  --c-selected: var(--blue-700);
  --c-halo: #FFFFFF;

  /* Basemap tuning (read by the style builder, kept here for one palette) */
  --bm-land: #F5F7F9;
  --bm-green: #DCEFDF;
  --bm-water: #BFDDF3;
  --bm-building: #E6E9EE;
  --bm-road-casing: #DFE4EA;
  --bm-road-major: #F1E9C9;

  /* Type */
  --font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-125: 12.5px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-hero: 44px;
  --lh-body: 1.45;
  --lh-tight: 1.2;

  /* Layout */
  --topbar-h: 60px;
  --sidebar-w: 124px; /* spec says 104px; 124px is the narrowest width where "Work orders" at 12.5px fits on one line next to an 18px icon (see docs/DECISIONS.md, 2026-09-15) */
  --panel-w: 372px;
  --map-inset: 12px;
  --control-size: 34px;
  --banner-h: 32px;

  /* Shape and depth */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-pill: 999px;
  --shadow-card: 0 2px 10px rgba(14, 27, 58, 0.10);
  --shadow-panel: -4px 0 16px rgba(14, 27, 58, 0.06);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue-600);

  /* Motion */
  --t-fast: 120ms ease-out;
  --t-panel: 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-panel: 0ms;
  }
}

@media (max-width: 767px) {
  :root {
    --sidebar-w: 0px;
    --panel-w: 100vw;
  }
}