/* Design tokens — mapped from DESIGN.md */
:root {
  /* Surfaces */
  --surface: #f9f9f9;
  --surface-dim: #dadada;
  --surface-bright: #f9f9f9;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f3f3;
  --surface-container: #eeeeee;
  --surface-container-high: #e8e8e8;
  --surface-container-highest: #e2e2e2;
  --on-surface: #1a1c1c;
  --on-surface-variant: #5d3f3e;
  --inverse-surface: #2f3131;
  --inverse-on-surface: #f1f1f1;
  --background: #f9f9f9;
  --canvas: #f5f5f5;
  --on-background: #1a1c1c;

  /* Brand / primary (NB Red) */
  --primary: #b80023;
  --primary-cta: #e21833;
  --on-primary: #ffffff;
  --primary-container: #e21833;
  --on-primary-container: #fff8f7;
  --surface-tint: #bf0025;
  --inverse-primary: #ffb3b0;
  --primary-fixed: #ffdad8;
  --primary-fixed-dim: #ffb3b0;
  --on-primary-fixed: #410006;
  --on-primary-fixed-variant: #93001a;

  /* Secondary / tertiary */
  --secondary: #5f5e5e;
  --on-secondary: #ffffff;
  --secondary-container: #e4e2e1;
  --on-secondary-container: #656464;
  --charcoal: #2d2d2d;
  --tertiary: #5a5b5b;
  --on-tertiary: #ffffff;

  /* Outline */
  --outline: #926e6d;
  --outline-variant: #e6bdba;
  --border: #e0e0e0;
  --input-border: #cccccc;

  /* Status (functional only) */
  --status-success: #107c10;
  --status-success-bg: #e6f4e6;
  --status-warning: #f5a623;
  --status-warning-bg: #fff4e0;
  --status-critical: #d11111;
  --status-critical-bg: #fde8e8;
  --status-offline: #5f5e5e;
  --status-offline-bg: #eeeeee;

  /* Error */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --display-lg-size: 48px;
  --display-lg-line: 56px;
  --headline-lg-size: 32px;
  --headline-lg-line: 40px;
  --headline-md-size: 24px;
  --headline-md-line: 32px;
  --title-lg-size: 20px;
  --title-lg-line: 28px;
  --body-lg-size: 16px;
  --body-lg-line: 24px;
  --body-md-size: 14px;
  --body-md-line: 20px;
  --label-md-size: 12px;
  --label-md-line: 16px;
  --data-mono-size: 14px;
  --data-mono-line: 20px;

  /* Radius */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-badge: 12px;
  --radius-full: 9999px;

  /* Spacing (4px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --gutter: 16px;
  --margin-mobile: 16px;
  --margin-desktop: 32px;

  /* Elevation */
  --shadow-focus: 0 4px 8px rgba(0, 0, 0, 0.06);

  /* Layout */
  --sidebar-width: 240px;
  --topbar-height: 56px;
}