@import "tailwindcss";

@layer base {
  @font-face {
    font-family: "Cal Sans";
    font-style: normal;
    src: url("/assets/fonts/CalSans.woff2") format("woff2"),
      url("/assets/fonts/CalSans.woff") format("woff"),
      url("/assets/fonts/CalSans.ttf") format("truetype"),
  }

  @font-face {
    font-family: "Karla";
    font-style: normal;
    src: url("/assets/fonts/KarlaVF.woff2") format("woff2"),
      url("/assets/fonts/KarlaVF.ttf") format("truetype"),
      url("/assets/fonts/KarlaMedium.otf") format("opentype");
  }

  @font-face {
    font-family: "Karla";
    font-style: italic;
    src: url("/assets/fonts/KarlaItalicVF.woff2") format("woff2"),
      url("/assets/fonts/KarlaItalicVF.ttf") format("truetype"),
      url("/assets/fonts/KarlaItalicMedium.otf") format("opentype");
  }

  h1 {
    font-size: var(--text-4xl);
    text-align: initial;
    margin-bottom: 1.5rem;
    font-family: "Cal Sans";
  }

  h2 {
    font-size: var(--text-3xl);
    font-family: "Cal Sans";
    margin-top: 1.5rem;
    text-align: initial;
  }

  h3 {
    font-size: var(--text-2xl);
    font-weight: bold;
    margin-top: 1.5rem;
    text-align: initial;
  }

  h4 {
    font-size: var(--text-xl);
    font-weight: bold;
    margin-top: 1.5rem;
    text-align: initial;
  }

  h5 {
    font-weight: bold;
    margin-top: 1.5rem;
    text-align: initial;
  }

  h6 {
    font-weight: bold;
    margin-top: 1.5rem;
    text-align: initial;
  }

  p {
    margin-top: 1.5rem;
  }
}

@theme {
  --font-sans: "Karla", sans-serif;
}