:root {
  --bg: #eff2f5;
  --surface: #ffffff;
  --surface-alt: #e3e8ed;
  --border: #cbd3da;
  --text-primary: #1b1f23;
  --text-secondary: #5a6472;
  --primary: #215c7a;
  --primary-pressed: #19455c;
  --on-primary: #ffffff;
  --accent: #b85900;

  --success: #157030;
  --warning: #96600d;
  --danger: #c0392b;
  --disabled-bg: #dde2e6;
  --disabled-text: #838d96;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  --radius-sm: 8px;
  --radius-lg: 16px;

  --font-display-size: 28px;
  --font-display-line: 36px;
  --font-h1-size: 22px;
  --font-h1-line: 28px;
  --font-h2-size: 18px;
  --font-h2-line: 24px;
  --font-body-size: 16px;
  --font-body-line: 22px;
  --font-label-size: 14px;
  --font-label-line: 20px;
  --font-caption-size: 12px;
  --font-caption-line: 16px;

  /* Stacking order: sticky in-page elements must always sit below overlays. */
  --z-sticky: 1;
  --z-overlay: 100;

  /* The stacked range, and the two widths inside it: 02's grid, then the app-bar identity. */
  --stacked-max-width: 1059.98px;
  --portrait-tablet-min-width: 768px;
  --initials-max-width: 479.98px;
}