:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --page-gutter: var(--space-4);
  --control-height: 2.75rem;
  --card-padding: var(--space-6);
  --card-padding-compact: var(--space-4);
  --chart-height: 14.375rem;
  --chart-height-compact: 12.5rem;
  --text-body: 1rem;
  --text-label: .875rem;
  --text-caption: .8125rem;
  --text-display: clamp(2.125rem, 6vw, 4.25rem);
  --text-heading-lg: 1.5rem;
  --text-heading-md: 1.25rem;
  --text-metric: clamp(2.25rem, 9vw, 4rem);
  --text-metric-compact: 1.5rem;
  --text-display-dashboard: 2.125rem;
  --text-metric-dashboard: 2.25rem;
  --metric-height-dashboard: 8.75rem;
  --device-card-min-dashboard: 15rem;
}

@media (min-width: 600px) {
  :root { --page-gutter: var(--space-5); }
}

@media (min-width: 1280px) {
  :root { --page-gutter: var(--space-6); }
}