@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

:root {
  font-size: 10px;

  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Font Weights */
  --weight-01: 400;
  --weight-02: 500;
  --weight-03: 600;
  --weight-04: 700;

  /* Font Sizes */
  --fs-h1: 4.8rem;
  --fs-h2: 3.6rem;
  --fs-h3: 2.4rem;
  --fs-body-lg: 1.8rem;
  --fs-body: 1.6rem;
  --fs-label-md: 1.4rem;
  --fs-small: 1.2rem;

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-base: 1.5;

  /* Letter Spacing */
  --ls-label: 0.1em;
}

/* Base resets for Typography */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-primary-01);
  background-color: var(--c-surface-01);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-03);
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  font-size: var(--fs-body);
  color: var(--c-text-01);
}

span,
strong {
  font-family: inherit;
}

strong {
  font-weight: var(--weight-04);
}

label {
  font-family: var(--font-body);
  font-size: var(--fs-label-md);
  font-weight: var(--weight-02);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}