:root {
  --height-utility: 40px;
  --maxWidth-paragraph: 35em;
  --maxWidth-container: 1440px;

  --spacing-button-bottom-offset: .15em;
  --spacing-button-bottom: calc(var(--spacing-xs) + var(--spacing-button-bottom-offset));

  --spacing-button-x: 1.25em;
  --spacing-button-top: 0.4em;
  --spacing-button-bottom: 0.4em;
  --spacing-button: var(--spacing-button-top) var(--spacing-button-x) var(--spacing-button-bottom) var(--spacing-button-x);

  --fontSize-h2: 32px;
  --fontSize-h3: 24px;
  --fontSize-label: 18px;
  --fontSize-body: 16px;

  --leading-h2: 1.2;
  --leading-h3: 1.2;
  --leading-label: 1.5;
  --leading-body: 1.4;

  --fontWeight-normal: 400;

  --borderRadius-xl: 2.5rem;

  --color-yellow: #FAF800;
  --color-yellow-tint: #D8D700;
  --color-yellow-tint-dark: #B2B100;
  --color-red: #CC0000;
  --color-red-light: #FAE6E6;
  --color-light: #F0E6DC;
  --color-silver: #D2C8BE;
  --color-gray: #786E64;
  --color-support: #298A60;
  --color-support-light: #c7d84b;
  --color-focus: rgba(0,0,0,0.5);

  --border: 1px solid var(--color-silver);

  --loading-dot-size: 3.5rem;
}

@media (min-width: 768px) {
  :root {
    --fontSize-h2: 48px;
    --fontSize-h3: 32px;
  }
}