:root {
  --canvas:  #FFFFFF;
  --off-white: #F4F4F2;
  --black:   #111111;
  --dark:    #171717;
  --white:   #FFFFFF;
  --grey:    #777777;
  --grey-lt: #E8E8E6;
  --red:     #F21B23;
  --red-dark: #D0141B;
  --img-bg:  #E3E3E1;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --text-display: clamp(2.8rem, 6.5vw, 5rem);
  --text-h1:      clamp(2.2rem, 4.5vw, 3.6rem);
  --text-h2:      clamp(1.6rem, 3vw, 2.4rem);
  --text-h3:      clamp(1.1rem, 1.8vw, 1.35rem);
  --text-lead:    clamp(0.95rem, 1.3vw, 1.1rem);
  --text-sm:      0.875rem;
  --text-xs:      0.72rem;
  --nav-h:        80px;
  --px: clamp(16px, 3vw, 22px);
  --gap:   clamp(14px, 2vw, 22px);
  --cpad:  clamp(48px, 6vw, 96px);
  --spad:  clamp(80px, 10vw, 150px);
  --r-sm:   10px;
  --r-md:   50px;
  --r-lg:   50px;
  --r-pill: 50px;
  --r-btn:  50px;
  --r-card: 50px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  180ms;
}

@media (max-width: 900px) {
  :root {
    --r-md:   40px;
    --r-lg:   40px;
    --r-pill: 40px;
    --r-btn:  40px;
    --r-card: 40px;
  }
}

@media (max-width: 600px) {
  :root {
    --nav-h:  70px;
    --r-md:   30px;
    --r-lg:   30px;
    --r-pill: 30px;
    --r-btn:  30px;
    --r-card: 30px;
  }
}