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

@font-face {
  font-family: 'Artex';
  src: url("/assets/Artex-Regular-43b19028.woff2") format('woff2'),
    url("/assets/Artex-Regular-e14decc5.woff") format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Artex';
  src: url("/assets/Artex-Medium-71177e30.woff2") format('woff2'),
    url("/assets/Artex-Medium-b4e2deb8.woff") format('woff');
  font-weight: 500;
  font-style: normal;
}

@layer base {
  html {
    font-family: "Artex", system-ui, normal;
    font-weight: 400;
    line-height: 1;
  }

  :root {
    --color-green-teal: rgb(23, 58, 63);
    --color-gray-light: rgb(246, 251, 253);
    --color-gray-blue: rgb(217, 238, 246);
    --color-black-nearly: rgb(10, 10, 10);
    --color-gray-light: rgb(246, 251, 253);
    --color-gray-blue: rgb(217, 238, 246);
    --color-green-lime: rgb(201, 255, 134);
    --color-green-neon: rgb(0, 255, 203);
    --color-green-camo: rgb(104,148, 129);
    --color-green-teal: rgb(23, 58, 63);

    /* Theme - Default */
    --color-primary: var(--color-green-teal);
    --color-secondary: var(--color-gray-blue);
    --color-muted: var(--color-gray-light);
    --color-accent: var(--color-green-neon);
    --color-body-bg: var(--color-gray-blue);
    --color-contactForm-bg: var(--color-green-lime);
    --color-contactForm-text: var(--color-green-teal);
    --color-footer-bg: var(--color-green-teal);
    --color-footer-text: var(--color-green-neon);
    --color-mobile-nav-bg: var(--color-green-teal);
    --color-mobile-nav-text: white;
    --color-nav-bg: var(--color-gray-light);
    --color-nav-text: var(--color-green-teal);
    --color-mobile-nav-button: var(--color-green-teal);
    --color-mobile-nav-button-focus: white;
    --color-mobile-nav-button-bg-focus: var(--color-green-teal);

    /* Theme - Buttons */
    --color-button-primary-border: var(--color-green-teal);
    --color-button-primary-bg: var(--color-transparent);
    --color-button-primary-text: var(--color-green-teal);
    --color-button-primary-bg-hover: var(--color-green-teal);
    --color-button-primary-text-hover: var(--color-green-neon);
  }
}

.theme-green-lime {
  --color-primary: var(--color-green-lime);
  --color-secondary: var(--color-green-teal);
  --color-muted: var(--color-green-camo);
  --color-accent: var(--color-green-lime);
  --color-body-bg: var(--color-green-lime);
  --color-contactForm-bg: var(--color-green-teal);
  --color-contactForm-text: var(--color-green-lime);
  --color-footer-bg: var(--color-green-teal);
  --color-footer-text: var(--color-green-lime);
  --color-nav-bg: var(--color-green-lime);
  --color-nav-text: var(--color-green-teal);
  --color-mobile-nav-bg: var(--color-green-teal);
  --color-mobile-nav-button: var(--color-green-teal);
  --color-mobile-nav-button-focus: var(--color-green-lime);
  --color-mobile-nav-button-bg-focus: var(--color-green-teal);
  --color-mobile-nav-text: var(--color-green-lime);

  /* Theme - Buttons */
  --color-button-primary-border: var(--color-green-teal);
  --color-button-primary-bg: var(--color-transparent);
  --color-button-primary-text: var(--color-green-teal);
  --color-button-primary-bg-hover: var(--color-green-teal);
  --color-button-primary-text-hover: var(--color-green-lime);
}

.theme-green-lime-on-teal {
  --color-primary: var(--color-green-lime);
  --color-secondary: var(--color-green-teal);
  --color-muted: var(--color-green-camo);
  --color-accent: var(--color-green-lime);
  --color-body-bg: var(--color-green-teal);
  --color-contactForm-bg: var(--color-green-camo);
  --color-contactForm-text: var(--color-green-lime);
  --color-footer-bg: var(--color-green-teal);
  --color-footer-text: var(--color-green-lime);
  --color-nav-bg: var(--color-green-teal);
  --color-nav-text: var(--color-green-lime);
  --color-mobile-nav-bg: var(--color-green-lime);
  --color-mobile-nav-button: var(--color-green-lime);
  --color-mobile-nav-button-focus: var(--color-green-teal);
  --color-mobile-nav-button-bg-focus: var(--color-green-lime);
  --color-mobile-nav-text: var(--color-green-teal);

  /* Theme - Buttons */
  --color-button-primary-border: var(--color-green-lime);
  --color-button-primary-bg: var(--color-transparent);
  --color-button-primary-text: var(--color-green-lime);
  --color-button-primary-bg-hover: var(--color-green-lime);
  --color-button-primary-text-hover: var(--color-green-teal);
}

.theme-green-neon {
  --color-primary: var(--color-green-neon);
  --color-secondary: var(--color-green-teal);
  --color-muted: var(--color-green-camo);
  --color-accent: var(--color-green-teal);
  --color-body-bg: var(--color-green-neon);
  --color-contactForm-bg: var(--color-green-teal);
  --color-contactForm-text: var(--color-green-neon);
  --color-footer-bg: var(--color-green-teal);
  --color-footer-text: var(--color-green-neon);
  --color-nav-bg: var(--color-green-neon);
  --color-nav-text: var(--color-green-teal);
  --color-mobile-nav-bg: var(--color-green-neon);
  --color-mobile-nav-button: var(--color-green-teal);
  --color-mobile-nav-button-focus: var(--color-green-neon);
  --color-mobile-nav-button-bg-focus: var(--color-green-teal);
  --color-mobile-nav-text: var(--color-green-teal);

  /* Theme - Buttons */
  --color-button-primary-border: var(--color-green-teal);
  --color-button-primary-bg: var(--color-transparent);
  --color-button-primary-text: var(--color-green-teal);
  --color-button-primary-bg-hover: var(--color-green-teal);
  --color-button-primary-text-hover: var(--color-green-neon);
}

.theme-green-teal {
  --color-primary: var(--color-green-neon);
  --color-secondary: var(--color-green-teal);
  --color-muted: var(--color-green-camo);
  --color-accent: var(--color-green-neon);
  --color-body-bg: var(--color-green-teal);
  --color-contactForm-bg: var(--color-green-neon);
  --color-contactForm-text: var(--color-green-teal);
  --color-footer-bg: var(--color-green-teal);
  --color-footer-text: var(--color-green-neon);
  --color-nav-bg: var(--color-green-teal);
  --color-nav-text: var(--color-green-neon);
  --color-mobile-nav-bg: var(--color-green-neon);
  --color-mobile-nav-button: var(--color-green-neon);
  --color-mobile-nav-button-focus: var(--color-green-teal);
  --color-mobile-nav-button-bg-focus: var(--color-green-neon);
  --color-mobile-nav-text: var(--color-green-teal);

  /* Theme - Buttons */
  --color-button-primary-border: var(--color-green-neon);
  --color-button-primary-bg: var(--color-transparent);
  --color-button-primary-text: var(--color-green-neon);
  --color-button-primary-bg-hover: var(--color-green-neon);
  --color-button-primary-text-hover: var(--color-green-teal);
}

@layer components {
  /* Button */
  .button, .button-standard {
    @apply inline-block rounded-standard border-2 py-3 px-8 normal-case transition duration-300 ease-in-out cursor-pointer;

    border-color: var(--color-button-primary-border);
    background-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);

    &:hover {
      background-color: var(--color-button-primary-bg-hover);
      color: var(--color-button-primary-text-hover);
    }
  }

  /* Forms */
  .form-text-field {
    @apply block w-full rounded-md border-0 py-3 px-3 text-green-teal leading-6 bg-inherit shadow-sm ring-1 ring-inset ring-green-teal placeholder:text-gray-400 focus:ring-2 text-sm focus:outline-0
  }
  .form-text-area {
    @apply block w-full rounded-md border-0 py-3 px-3 text-sm text-green-teal bg-inherit shadow-sm ring-1 ring-inset ring-green-teal placeholder:text-gray-400 focus:ring-2 focus:outline-0
  }

  /* Grid */
  .gap-standard {
    @apply gap-8
  }

  /* Headings */
  .text-h1 {
    @apply text-[3.6rem] normal-case sm:text-6xl
  }
  .text-h2 {
    @apply text-5xl normal-case
  }
  .text-h3 {
    @apply text-4xl normal-case
  }
  .text-h4 {
    @apply text-3xl normal-case
  }
  .text-h5 {
    @apply text-2xl normal-case
  }
  .text-h6 {
    @apply text-xl normal-case
  }
  .text-p {
    @apply mb-6 text-lg leading-tight
  }

  /* Layouts */
  .mt-layout-standard {
    @apply mt-10 sm:mt-20
  }
  .mt-layout-double {
    @apply mt-20 sm:mt-40
  }
  .mb-layout-standard {
    @apply mb-10 sm:mb-20
  }
  .mb-layout-double {
    @apply mb-20 sm:mb-40
  }
  .pt-layout-standard {
    @apply pt-20
  }
  .pt-layout-double {
    @apply pt-20 sm:pt-40
  }
  .pb-layout-standard {
    @apply pb-20
  }
  .pb-layout-double {
    @apply pb-20 sm:pb-40
  }
  .px-layout-standard {
    @apply px-20
  }
  .px-layout-double {
    @apply px-20 sm:py-40
  }
  .py-layout-standard {
    @apply py-10 sm:py-20
  }
  .py-layout-double {
    @apply py-20 sm:py-40
  }

  /* Nav */
  .navItem-standard {
    @apply text-mobileNavText hover:bg-mobileNavText hover:text-mobileNavBg xl:text-navText xl:hover:bg-navText xl:hover:text-navBg
  }
  .navItem-selected {
    @apply text-mobileNavBg bg-mobileNavText xl:text-navBg xl:bg-navText;
  }

  /* Padding */
  .p-standard {
    @apply p-4 sm:p-8
  }

  /* Rounding */
  .rounded-standard {
    @apply rounded-xl
  }

  /* Transition */
  .transition-standard {
    @apply transition duration-300 ease-in-out
  }

  /* Wrappers */
  .max-w-standard {
    @apply max-w-[90rem]
  }
  .main-content-wrapper {
    @apply max-w-standard mx-auto p-standard
  }
}

#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner {
  @apply p-standard
}
#hs-eu-cookie-confirmation #hs-eu-confirmation-button {
  @apply inline-block rounded-standard border-2 py-3 px-8 normal-case transition duration-300 ease-in-out cursor-pointer bg-green-teal text-green-neon border-green-teal;
}