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

:root {
  --spacing: 0.25rem;

  --radius-*: unset;
  --radius-small: 12px;
  --radius: 24px;
  --radius-semilarge: 32px;
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10);

  --container-padding: 1rem;
  --container-large-width: calc(80rem + var(--container-padding) *2);
  --container-width: calc(1280px + var(--container-padding) *2);

  --text-base: 18px;
  --text-base--line-height: 26px;

  --font-libre-baskerville: "Libre Baskerville", serif;
  --font-roboto: "Roboto", sans-serif;

  --primary: #FF6B6B;
  --primary-light: #ffefef;
  --secondary: #062B47;
  --secondary-light: #6a8091;
  --blue: #2264DC;
  --blue-light: #BDD0F4;
  --white: #fff;
  --gray-light: #F8F6F5;
  --gray: #E9E5E1;
  --gray-dark: #d9d9d9;

  --color-primary: var(--primary);
  --color-primary-light: var(--primary-light);
  --color-secondary: var(--secondary);
  --color-secondary-light: var(--secondary-light);
  --color-blue: var(--blue);
  --color-blue-light: var(--blue-light);
  --color-white: var(--white);
  --color-gray-light: var(--gray-light);
  --color-gray: var(--gray);
  --color-gray-dark: var(--gray-dark);

  @media (max-width: 48rem) {
    --text-base: 15px;
  }
}



@layer components {
  .container {
    max-width: var(--container-width);
    padding: 0 var(--container-padding);
    width: 90%;
    margin: auto;
  }
  .container-large {
    max-width: var(--container-large-width);
    padding: 0 var(--container-padding);
    width: 90%;
    margin: auto;
  }

  h1 {
    font-size: 40px;
    line-height: 48px;
    font-family: "Libre Baskerville", serif;
    font-weight: bold;

    strong {
      color: var(--primary);
      font-weight: bold;
    }

    @media (max-width: 48rem) {
      font-size: 34px;
      line-height: 42px;
    }
  }

  h2 {
    @apply mb-6;
    font-size: 38px;
    line-height: 46px;
    font-family: "Libre Baskerville", serif;
    font-weight: bold;

    strong {
      color: var(--primary);
      font-weight: bold;
    }

    @media (max-width: 48rem) {
      font-size: 30px;
      line-height: 38px;
    }
  }

  h3 {
    @apply mb-4;
    font-size: 22px;
    line-height: 26px;
    font-family: 'Fredoka', sans-serif;

    strong {
      font-weight: bold;
      color: var(--primary);
    }

    @media (max-width: 48rem) {
      font-size: 18px;
      line-height: 22px;
    }
  }

  p {
    @apply mb-6;
  }

  li {
    @apply mb-3;
  }
}