:root {
  /* Colors */
  --color-paper: #FFFAEC;
  --color-manila: #FFF2D1;
  --color-charcoal: #1A1A1A;
  --color-cash: #505B2E;

  /* Typography — Families */
  --font-display: 'HD Microbic Roman', serif;
  --font-display-italic: 'HD Microbic Italic', serif;
  --font-display-condensed: 'HD Microbic Condensed', sans-serif;
  --font-body: 'FK Grotesk', sans-serif;

  /* Typography — Sizes (mobile-first, desktop overridden in media query) */
  --text-h1: 48px;
  --text-h2: 35px;
  --text-h3: 24px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-button: 16px;
  --text-nav: 16px;
  --text-small: 12px;

  /* Line Heights */
  --leading-heading: 1.1;
  --leading-body: 1.4;

  /* Spacing — Page Margins */
  --page-margin: 15px;

  /* Spacing — Section Gaps */
  --section-gap: 0px;

  /* Spacing — Component */
  --space-xs: 8px;
  --space-sm: 15px;
  --space-md: 30px;
  --space-lg: 60px;
  --space-xl: 90px;

  /* Layout */
  --max-width: 1440px;
  --nav-height: 80px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

@media (min-width: 768px) {
  :root {
    --text-h1: 64px;
    --text-h2: 40px;
    --text-h3: 28px;
    --text-body: 16px;
    --text-small: 16px;
    --page-margin: 35px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-margin: 135px;
  }
}