:root {
  --color-brand: #a2002f;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-muted: #d9d9d9;

  --font-sans: "Plus Jakarta Sans", sans-serif;
  --font-light: 300;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --text-display: 4.375rem;
  --leading-display: 1;
  --text-heading: 2.375rem;
  --leading-heading: 3.5rem;
  --text-lede: 1.5rem;
  --leading-lede: 2rem;
  --text-body: 1.125rem;
  --leading-body: 1.625rem;
  --text-caption: 1rem;
  --leading-caption: 1.5rem;
  --text-label: 0.875rem;
  --leading-label: 1.25rem;
  --text-micro: 0.75rem;
  --leading-micro: 1rem;

  --grid-cols: 12;
  --grid-margin: 36px;
  --grid-gutter: 24px;
  --content-max: 1960px;
  --dot: 10px;
  --border: 1.5px;
  --radius-pill: 100px;
  --btn-pad-y: 14px;
  --btn-pad-x: 34px;
  --z-header: 20;
  --z-menu: 40;

  --font: var(--font-sans);
  --pad: var(--grid-margin);
  --gap: var(--grid-gutter);
  --text-hero: var(--text-display);
  --text-cta: var(--text-heading);
  --text-small: var(--text-label);
  --leading-small: var(--leading-label);
  --radius-btn: var(--radius-pill);
}

@media (max-width: 767px) {
  :root {
    --grid-cols: 6;
    --grid-margin: 24px;
    --grid-gutter: 16px;
    --text-display: 2.5rem;
    --text-heading: 1.5rem;
    --leading-heading: 2rem;
    --text-lede: 1.125rem;
    --leading-lede: 1.5rem;
    --text-body: 0.875rem;
    --leading-body: 1.375rem;
    --dot: 6px;
    --btn-pad-y: 10px;
    --btn-pad-x: 28px;
  }
}