/* Design System Variables */
:root {
  /* Colors */
  --color-black: #000;
  --color-white: #fff;
  --color-yellow: #e3fe52;
  /* Fonts */
  --font-primary: 'Metrify', sans-serif;
  /* Typography - Desktop */
  --font-h1: 40px;
  --font-h2: 40px;
  --font-h3: 24px;
  --text--s: 18px;
  --text--m: 18px;
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* Mobile Typography Override */
@media (min-width: 768px) {
  :root {
    --font-h1: 40px;
    --font-h2: 40px;
    --font-h3: 24px;
    --text--m: 20px;
  }
}

@media (min-width: 992px) {
  :root {
    --font-h1: 80px;
    --font-h2: 50px;
    --font-h3: 40px;
    --text--m: 20px;
  }
}

@media (min-width: 1200px) {
  :root {
    --font-h1: 100px;
    --font-h2: 80px;
    --font-h3: 60px;
  }
}