:root {
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1.0rem;   /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;   /* 20px */
  --font-size-xl: 1.5rem;   /* 24px */
  --font-size-2xl: 2.0rem;   /* 32px */
  --font-size-3xl: 3.0rem;   /* 48px */

  --line-height-xs: 1.6;
  --line-height-sm: 1.55;
  --line-height-base: 1.5;
  --line-height-md: 1.4;
  --line-height-lg: 1.3;
  --line-height-xl: 1.25;
  --line-height-2xl: 1.2;
  --line-height-3xl: 1.15;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --font-family-base: 'Outfit', sans-serif;

  /* Roles: use these in components, not raw steps. */
  --text-body: var(--font-size-base);
  --text-body-line-height: var(--line-height-base);
  --text-caption: var(--font-size-sm);
  --text-caption-line-height: var(--line-height-sm);
  --text-heading: var(--font-size-2xl);
  --text-heading-line-height: var(--line-height-2xl);
  --text-display: var(--font-size-3xl);
  --text-display-line-height: var(--line-height-3xl);
  --weight-body: var(--font-weight-regular);
  --weight-ui: var(--font-weight-medium);
  --weight-heading: var(--font-weight-bold);
}