/* Design Tokens */

:root {
  /* Breakpoints (reference only, see breakpoints.css) */
  /* default       — mobile   (375–699)   */
  /* 700px         — tablet   (700–1023)  */
  /* 1024px        — tablet   (1024–1199) */
  /* 1200px        — desktop  (1200–1439) */
  /* 1440px        — desktop  (1440–1919) */
  /* 1920px        — desktop  (1920+)     */

  /* Colors */
  --color-black: #151515;

  /* Typography — H1 */
  --h1-font-size: 64px;
  --h1-line-height: 100%;
  --h1-letter-spacing: -1.92px;

  /* Typography — Body 24 */
  --body-24-font-size: 18px;
  --body-24-line-height: 120%;

  /* Typography — Card Title */
  --card-title-font-size: 24px;
  --card-title-line-height: 140%;

  /* Typography — Text Meta */
  --text-meta-font-size: 14px;

  /* Spacing */

  /* Borders */

  /* Shadows */

  /* Transitions */

  /* Z-index layers */
}

/* 700 — H1 140px, body-24 24px, card-title 44px */
@media (min-width: 700px) {
  :root {
    --h1-font-size: 140px;
    --h1-letter-spacing: -5.4px;
    --body-24-font-size: 24px;
    --card-title-font-size: 44px;
    --card-title-line-height: 110%;
  }
}

/* 1440 — text-meta 16px */
@media (min-width: 1440px) {
  :root {
    --text-meta-font-size: 16px;
  }
}

/* 1650 — H1 180px */
@media (min-width: 1650px) {
  :root {
    --h1-font-size: 180px;
    --h1-letter-spacing: -5.4px;
  }
}