:root {
  /* Colors */
  --text-primary: #1b1918;
  --text-secondary: #868686;
  --text-inverse: #ffffff;

  --bg-white: #ffffff;
  --bg-fog: #e7f2f2;
  --bg-gray-10: #f7f7f7;
  --bg-forest: #002d29;
  --bg-teal-10: rgba(68, 165, 156, 0.1);
  --bg-teal-15: rgba(68, 165, 156, 0.15);
  --bg-teal-100: #44a59c;

  --border-light: rgba(255, 255, 255, 0.1);
  --border-dark: rgba(0, 0, 0, 0.1);

  --icon-teal: #44a59c;
  --icon-white: #ffffff;

  --main-brand: #44a59c;
  --brand-gradient: linear-gradient(90deg, #44a59c 23.25%, #6ccda5 76.81%);

  /* Typography */
  --font-family-base: 'TikTok Sans', 'Helvetica Neue', Arial, sans-serif;

  --font-hero: 600 11rem/1 var(--font-family-base);
  --font-hero-mobile: 600 4.7rem/1 var(--font-family-base);
  --font-subheadline-mobile: 300 1.7rem/1.5 var(--font-family-base);
  --font-h1: 600 8rem/1 var(--font-family-base);
  --font-h1-mobile: 600 4.7rem/1 var(--font-family-base);
  --font-h3: 600 4rem/1.1 var(--font-family-base);
  --font-h4: 600 2.8rem/1.3 var(--font-family-base);
  --font-h5: 600 2.2rem/1.3 var(--font-family-base);
  --font-subheadline: 300 2.2rem/1.5 var(--font-family-base);
  --font-paragraph-1: 300 1.8rem/1.7 var(--font-family-base);
  --font-paragraph-2: 300 1.6rem/1.7 var(--font-family-base);
  --font-caption: 300 1.4rem/1.4 var(--font-family-base);
  --font-overline: 500 1.4rem/1 var(--font-family-base);
  --font-button: 500 1.6rem/1.4 var(--font-family-base);
  --font-stats-number: 600 4rem/1 var(--font-family-base);

  /* Layout */
  --container-width: 128rem; /* 1280px */
  --container-padding: 3.2rem; /* 32px */
}