@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Slab:wght@100..900&display=swap");

@import url("global.css");
@import url("layout.css");
@import url("hero.css");
@import url("navigation.css");
@import url("design-elements.css");
@import url("components.css");
@import url("udd-modellen.css");
@import url("accordion.css");
@import url("cards.css");
@import url("lists.css");
@import url("testimonials.css");
@import url("typography.css");

@import url("rwd.css");
@import url("dark-mode.css");

:root {
  /* ----- COLORS -----  */
  --aspit-night-green: HSL(175, 47%, 12%);
  --aspit-near-night-green: HSL(175, 47%, 13%);
  --aspit-darkest-green: HSL(175, 47%, 15%);
  --aspit-darker-green: HSL(175, 47%, 18%);
  --aspit-lighter-green: HSL(176, 36%, 23%);
  --aspit-red: HSL(5, 100%, 64%);
  --aspit-white: HSL(0, 0%, 100%);
  --aspit-lightest-green: #99cdcd;
  --aspit-lightest-green: HSL(176, 36%, 20%);
  --aspit-lightest-red: #fecdcc;

  /* ----- SIZES ----- */
  --page-header-height: 3rem;

  /* ----- TYPOGRAPHY ----- */
  --h1-size: 2rem;
  --h2-size: 2.8rem;
  --p-size: 1.1rem;
  --line-height: 1.4;
}

@media (min-width: 800px) {
  :root {
    --h1-size: 4rem;
    --h2-size: 4rem;
    --p-size: 1.4rem;
    --line-height: 1.8;
  }
}