@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-weight: 100 900;
    src: url("/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
    font-family: "Outfit";
  }

  @font-face {
    font-weight: 100 900;
    src: url("/fonts/YoungSerif-Regular.ttf") format("truetype");
    font-family: "Young Serif";
  }

  h1,
  h2 {
    font-weight: 400;
    line-height: 100%;
    font-family: theme("fontFamily.serif");
  }

  h1 {
    color: theme("colors.dark-charcoal");
    font-size: 2.5rem;
  }

  h2 {
    color: theme("colors.brandy-red");
    font-size: 1.75rem;
  }

  h3 {
    color: theme("colors.dark-raspberry");
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 100%;
  }

  p {
    color: theme("colors.wenge-brown");
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;

    > strong {
      font-weight: 700;
    }
  }

  td {
    color: theme("colors.wenge-brown");
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;

    &:last-child {
      color: theme("colors.brandy-red");
      font-weight: 700;
    }
  }
}