/* Design tokens (rework Phase 1). Additive layer: the existing style.css rules
   are unchanged so Phase 1 keeps full visual parity; new/rework code draws from
   these variables. The fuller base.css / panels.css split and the .btn--* /
   .status-line unification land in Phase 3. Sprite/vehicle CSS is untouched. */
:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* Font sizes (smallest text stays 11px — see the AA-contrast note in style.css) */
  --font-2xs: 11px;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-2xl: 20px;

  /* Realm accents — Vehicle demo (SOVD) reuses the brand; Test target (sim) gets
     a visually distinct violet. Consumed by the Phase 2 sidebar + realm badges. */
  --realm-sovd: var(--brand);
  --realm-sim: #6d28d9;
  --realm-sim-hover: #5b21b6;
  --realm-sim-bg-soft: #f3ecfe;

  /* Focus ring */
  --focus-ring: var(--brand);
}