:root {
  color-scheme: light dark;

  --UI-Black: #000000;
  --UI-Gray: #8e8e93;
  --UI-Gray-2: light-dark(#a3a3b2, #636366);
  --UI-Gray-3: light-dark(#c7c7cc, #48484a);
  --UI-Gray-4: light-dark(#d1d1d6, #3a3a3c);
  --UI-Gray-5: light-dark(#e5e5ea, #2c2c2e);
  --UI-Gray-6: light-dark(#f2f2f7, #1c1c1e);
  --UI-White: #ffffff;

  --UI-Backgrounds-Primary: light-dark(#ffffff, #000000);
  --UI-Backgrounds-Tertiary: light-dark(#ffffff, #2c2c2e);
  --UI-Backgrounds-Secondary: light-dark(#f1f4f4, #1c1c1e);

  --Text-Primary: light-dark(var(--UI-Black), var(--UI-White));
  --Text-Secondary: light-dark(rgba(60, 60, 67, 0.6), rgba(235, 235, 245, 0.6));

  --Brand-Indexing-Green: #4af120;
  --Brand-Indexing-Pink: #dd67ab;
  --Brand-White-Smoke: #ededed;

  --font-size-tiny: 12px;
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-4xl: 60px;

  --font-display: Inter, sans-serif;
  --font-code: "Fira Code", monospace;
}

@media screen and (max-width: 768px) {
  :root {
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
  }
}