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

@font-face {
  font-family: "VELUX Transform";
  src: url("./fonts/velux-transform-variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  /* Variable Axes
        "wght": 100 - 700
        "wdth": 0 - 100
    */
}

@layer base {
  html {
    font-family: "VELUX Transform", ui-sans-serif, system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
      "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
  }
}

@layer components {
  .vlx-container {
    @apply container p-6 sm:p-10 lg:px-9;
  }
  .vlx-grid {
    @apply grid grid-cols-4 sm:grid-cols-12 md:grid-cols-24 gap-4 sm:gap-6;
  }

  .prose {
    @apply !max-w-none !text-inherit;

    h2 {
      @apply font-heading-m;
    }
    h3 {
      @apply font-heading-s;
    }
    h4 {
      @apply font-heading-xs;
    }
    h3,
    h4 {
      b,
      strong {
        @apply font-inherit;
      }
    }
    h2 {
      b,
      strong {
        @apply font-heading-m-strong;
      }
    }

    b,
    strong {
      @apply font-600 sm:font-560;
    }

    a {
      @apply duration-350 font-inherit no-underline border-b-2 border-velux-blue-600;

      &:hover {
        @apply text-velux-white;
        background: linear-gradient(
          90deg,
          transparent 25%,
          theme("colors.velux.blue-600") 25%,
          theme("colors.velux.blue-600") 100%
        );
        background-size: 400% 400%;
        animation: gradient 350ms forwards;
      }
    }
    > * > :where(:first-child):not(:where([class~="not-prose"] *)) {
      @apply !mt-0;
    }
    > * > :where(:last-child):not(:where([class~="not-prose"] *)) {
      @apply !mb-0;
    }
  }

  .font-button-m {
    @apply text-16 leading-115 font-w-60 font-400 tracking-1;
  }
  .font-button-s {
    @apply text-14 leading-115 font-w-60 font-400 tracking-1;
  }
  .font-button-xs {
    @apply text-12 leading-115 font-w-60 font-400 tracking-1;
  }
  .font-button-xxs {
    @apply text-11 leading-115 font-w-60 font-400 tracking-1;
  }

  .font-tag-xs {
    @apply text-12 leading-100 font-w-45 font-400 tracking-6 uppercase;
  }
  .font-tag-xxs {
    @apply text-11 leading-100 font-w-45 font-440 tracking-6 uppercase;
  }

  .font-heading-xl {
    @apply text-40 leading-110 font-w-100 font-260 sm:text-64 sm:leading-115 md:text-80 lg:text-88;
  }
  .font-heading-l {
    @apply text-32 leading-120 font-w-100 font-320 sm:text-42 sm:font-260 md:text-48 lg:text-56;
  }
  .font-heading-m {
    @apply text-26 leading-130 font-w-100 font-320 sm:text-28 sm:leading-120 md:text-32 lg:text-40;
  }
  .font-heading-m-strong {
    @apply font-heading-m font-560;
  }
  .font-heading-s {
    @apply text-20 leading-135 font-w-100 font-400 sm:text-22 sm:leading-130 sm:font-360 md:text-24 lg:text-32;
  }
  .font-heading-xs {
    @apply text-16 leading-140 font-w-100 font-400 sm:text-18 sm:leading-135 md:text-20 lg:text-24;
  }

  .font-body-m {
    @apply text-16 leading-135 font-w-45 font-300 sm:text-18 sm:leading-140 sm:font-w-60 sm:font-240 md:text-20 lg:text-24;
  }
  .font-body-m-strong {
    @apply font-body-m font-600 sm:font-560;
  }
  .font-body-s {
    @apply text-14 leading-135 font-w-45 font-300 sm:text-16 sm:font-w-60 lg:text-20;
  }
  .font-body-s-strong {
    @apply font-body-s font-600 sm:font-560;
  }
  .font-body-xs {
    @apply text-12 leading-130 font-w-45 font-360 sm:font-w-60 sm:font-400 lg:text-14;
  }
  .font-body-xs-strong {
    @apply font-body-xs font-600 sm:font-560;
  }

  .font-quote-l {
    @apply text-24 leading-130 font-w-45 font-320 sm:text-32 sm:leading-120 sm:font-w-60 sm:font-260 md:text-40 lg:text-48;
  }
  .font-quote-s {
    @apply text-20 leading-130 font-w-45 font-320 sm:text-24 sm:leading-120 sm:font-w-60 sm:font-260 md:text-28 lg:text-32;
  }
}

@layer utilities {
  .font-w-45 {
    font-variation-settings: "wdth" 45;
  }
  .font-w-60 {
    font-variation-settings: "wdth" 60;
  }
  .font-w-100 {
    font-variation-settings: "wdth" 100;
  }
  .word-break {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@keyframes gradient {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: -100% -50%;
  }
}
