:root {

  /* Typography */

  --font-title: Caprasimo, serif;
  --font-size-title: 22.38cqw;
  --font-weight-title: 400;
  --line-height-title: 1;

  --font-body: Onest, sans-serif;
  --font-size-body: 20px;
  --font-weight-body: 400;
  --line-height-body: 1.5;

  --font-size-subheading: 20px;
  --font-weight-subheading: 500;

  --font-size-caption: 15px;

  --font-size-menu: 1.88cqw;

  /* Spacing */
  --space-xs: 5px;
  --space-s: 10px;
  --space-m: 20px;
  --space-l: 40px;
  --space-xl: 80px;

  /* Interactions */
  --duration-x-fast: 50ms;
  --duration-fast: 100ms;
  --duration-steady-short: 150ms;
  --duration-steady: 250ms;
  --duration-steady-long: 350ms;
  --duration-slow: 500ms;
  --duration-x-slow: 750ms;
}

/* Breakpoints */

@media (width <= 1024px) {
  :root {
    --font-size-body: 18px;
    --font-size-subheading: 18px;
    --font-size-caption: 13.5px;
    --font-size-menu: 2.11cqw;

    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 32px;
    --space-xl: 64px;
  }
}

@media (width <= 768px) {
  :root {
    --font-size-menu: 13.5px;
  }
}