:root {
  /* Typography */
  --font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-heading: "Montserrat", "Inter", system-ui, sans-serif;
  --font-family-mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  --font-size-micro: 0.75rem;
  --font-size-label: 0.875rem;
  --font-size-body: 1rem;
  --font-size-subtitle: 1.125rem;
  --font-size-section-title: 1.25rem;
  --font-size-page-title: 1.5rem;
  --line-height-tight: 1.2;
  --line-height-label: 1.35;
  --line-height-body: 1.5;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --radius-control: 0.5rem;
  --radius-surface: 0.875rem;
  --radius-round: 999px;
  --border-width: 1px;
  --content-width: 90rem;
  --content-width-narrow: 52rem;
  --control-height: 2.5rem;
  --control-height-touch: 2.75rem;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --motion-fast: 150ms;
  --motion-normal: 240ms;
  --z-content: 1;
  --z-sticky: 900;
  /* The legacy application CSS contains overlays above 2000. Keep the
     shared navigation and modal layers in an explicit, collision-free band. */
  --z-topbar: 10000;
  --z-dropdown: 10010;
  --z-modal: 20000;

  /* Shared responsive reference values (also documented for media queries). */
  --breakpoint-mobile: 40rem;
  --breakpoint-tablet: 56.25rem;
  --breakpoint-desktop: 64rem;
}