@import url("https://use.typekit.net/plm2wxf.css");

@layer base {
  :root {
    /* Font Family */
    --font-family-primary: "bio-sans", sans-serif;

    /* Display Typography (4rem+) */
    --font-display-light: 300 4rem/1.125 var(--font-family-primary);
    --letter-spacing-display-light: -0.1875rem;

    /* Heading Typography - Light Weight */
    --font-head-xl-light: 300 3rem/1.208 var(--font-family-primary);
    --letter-spacing-head-xl-light: -0.09rem;

    --font-head-l-light: 300 2.25rem/1.167 var(--font-family-primary);
    --letter-spacing-head-l-light: -0.0675rem;

    --font-head-m-light: 300 1.75rem/1.214 var(--font-family-primary);
    --letter-spacing-head-m-light: -0.0525rem;

    --font-head-s-light: 300 1.5rem/1.25 var(--font-family-primary);
    --letter-spacing-head-s-light: -0.03rem;

    /* Heading Typography - Regular Weight */
    --font-head-l-regular: 400 2.25rem/1.167 var(--font-family-primary);
    --letter-spacing-head-l-regular: -0;

    --font-head-m-regular: 400 1.75rem/1.286 var(--font-family-primary);
    --letter-spacing-head-m-regular: -0.035rem;

    --font-head-s-regular: 400 1.5rem/1.333 var(--font-family-primary);
    --letter-spacing-head-s-regular: -0.03rem;

    --font-head-xs-regular: 400 1.375rem/1.364 var(--font-family-primary);
    --letter-spacing-head-xs-regular: -0;

    /* Heading Typography - Semibold Weight */
    --font-head-m-semibold: 500 1.75rem/1.286 var(--font-family-primary);
    --letter-spacing-head-m-semibold: -0.0175rem;

    --font-head-s-semibold: 500 1.5rem/1.333 var(--font-family-primary);
    --letter-spacing-head-s-semibold: -0.015rem;

    --font-head-xs-semibold: 500 1.375rem/1.364 var(--font-family-primary);
    --letter-spacing-head-xs-semibold: -0.0138rem;

    /* Body Typography - Regular Weight */
    --font-body-xl-regular: 400 1.25rem/1.4 var(--font-family-primary);
    --letter-spacing-body-xl-regular: -0.0125rem;

    --font-body-l-regular: 400 1.125rem/1.333 var(--font-family-primary);
    --letter-spacing-body-l-regular: -0.0113rem;

    --font-body-m-regular: 400 1.0625rem/1.353 var(--font-family-primary);
    --letter-spacing-body-m-regular: -0.0106rem;

    --font-body-s-regular: 400 1rem/1.313 var(--font-family-primary);
    --letter-spacing-body-s-regular: -0.01rem;

    --font-body-xs-regular: 400 0.9375rem/1.267 var(--font-family-primary);
    --letter-spacing-body-xs-regular: -0.0094rem;

    /* Body Typography - Semibold Weight */
    --font-body-xl-semibold: 500 1.25rem/1.4 var(--font-family-primary);
    --letter-spacing-body-xl-semibold: -0.0125rem;

    --font-body-l-semibold: 500 1.125rem/1.333 var(--font-family-primary);
    --letter-spacing-body-l-semibold: -0.0113rem;

    --font-body-m-semibold: 500 1.0625rem/1.353 var(--font-family-primary);
    --letter-spacing-body-m-semibold: -0.0106rem;

    --font-body-s-semibold: 500 1rem/1.313 var(--font-family-primary);
    --letter-spacing-body-s-semibold: -0.01rem;

    --font-body-xs-semibold: 500 0.9375rem/1.267 var(--font-family-primary);
    --letter-spacing-body-xs-semibold: -0;

    /* Caption Typography */
    --font-caption-semibold: 500 0.75rem/1.333 var(--font-family-primary);
    --letter-spacing-caption: -0.0625rem;

    /* Set base font size */
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body {
    font: var(--font-body-s-regular);
    letter-spacing: var(--letter-spacing-body-s-regular);
  }

  h1 {
    color: var(--color-primary);
    font: var(--font-head-m-light);
    letter-spacing: var(--letter-spacing-head-m-light);
  }

  h2 {
    color: var(--color-primary);
    font: var(--font-head-m-light);
    letter-spacing: var(--letter-spacing-head-m-light);
  }

  /* Heading Classes - Light Weight */
  .text-head-xl-light {
    font: var(--font-head-xl-light);
    letter-spacing: var(--letter-spacing-head-xl-light);
  }

  .text-head-l-light {
    font: var(--font-head-l-light);
    letter-spacing: var(--letter-spacing-head-l-light);
  }

  .text-head-m-light {
    font: var(--font-head-m-light);
    letter-spacing: var(--letter-spacing-head-m-light);
  }

  .text-head-s-light {
    font: var(--font-head-s-light);
    letter-spacing: var(--letter-spacing-head-s-light);
  }

  /* Heading Classes - Regular Weight */
  .text-head-l-regular {
    font: var(--font-head-l-regular);
    letter-spacing: var(--letter-spacing-head-l-regular);
  }

  .text-head-m-regular {
    font: var(--font-head-m-regular);
    letter-spacing: var(--letter-spacing-head-m-regular);
  }

  .text-head-s-regular {
    font: var(--font-head-s-regular);
    letter-spacing: var(--letter-spacing-head-s-regular);
  }

  .text-head-xs-regular {
    font: var(--font-head-xs-regular);
    letter-spacing: var(--letter-spacing-head-xs-regular);
  }

  /* Heading Classes - Semibold Weight */
  .text-head-m-semibold {
    font: var(--font-head-m-semibold);
    letter-spacing: var(--letter-spacing-head-m-semibold);
  }

  .text-head-s-semibold {
    font: var(--font-head-s-semibold);
    letter-spacing: var(--letter-spacing-head-s-semibold);
  }

  .text-head-xs-semibold {
    font: var(--font-head-xs-semibold);
    letter-spacing: var(--letter-spacing-head-xs-semibold);
  }

  /* Body Text Classes - Regular Weight */
  .text-body-xl-regular {
    font: var(--font-body-xl-regular);
    letter-spacing: var(--letter-spacing-body-xl-regular);
  }

  .text-body-l-regular {
    font: var(--font-body-l-regular);
    letter-spacing: var(--letter-spacing-body-l-regular);
  }

  .text-body-m-regular {
    font: var(--font-body-m-regular);
    letter-spacing: var(--letter-spacing-body-m-regular);
  }

  .text-body-s-regular {
    font: var(--font-body-s-regular);
    letter-spacing: var(--letter-spacing-body-s-regular);
  }

  .text-body-xs-regular {
    font: var(--font-body-xs-regular);
    letter-spacing: var(--letter-spacing-body-xs-regular);
  }

  /* Body Text Classes - Semibold Weight */
  .text-body-xl-semibold {
    font: var(--font-body-xl-semibold);
    letter-spacing: var(--letter-spacing-body-xl-semibold);
  }

  .text-body-l-semibold {
    font: var(--font-body-l-semibold);
    letter-spacing: var(--letter-spacing-body-l-semibold);
  }

  .text-body-m-semibold {
    font: var(--font-body-m-semibold);
    letter-spacing: var(--letter-spacing-body-m-semibold);
  }

  .text-body-s-semibold {
    font: var(--font-body-s-semibold);
    letter-spacing: var(--letter-spacing-body-s-semibold);
  }

  .text-body-xs-semibold {
    font: var(--font-body-xs-semibold);
    letter-spacing: var(--letter-spacing-body-xs-semibold);
  }

  /* Caption Text */
  .text-caption-semibold {
    font: var(--font-caption-semibold);
    letter-spacing: var(--letter-spacing-caption);
  }

  @media screen and (min-width: 48rem) {
    body {
      font: var(--font-body-m-regular);
      letter-spacing: var(--letter-spacing-body-m-regular);
    }

    h1 {
      font: var(--font-head-xl-light);
      letter-spacing: var(--letter-spacing-head-xl-light);
    }

    h2 {
      font: var(--font-head-l-light);
      letter-spacing: var(--letter-spacing-head-l-light);
    }
  }
}