@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;

    h1 {
      @apply text-40 sm:text-64 md:text-80 lg:text-88 leading-110 sm:leading-115 font-260 font-w-100;
    }
    h2 {
      @apply text-32 sm:text-42 md:text-48 lg:text-56 leading-120 font-320 sm:font-260 font-w-100;
    }
    h3 {
      @apply text-26 sm:text-28 md:text-32 lg:text-40 leading-130 sm:leading-120 font-320 font-w-100;
    }
    h4 {
      @apply text-20 sm:text-22 md:text-24 lg:text-32 leading-135 sm:leading-130 font-400 sm:font-360 font-w-100;
    }
    h5 {
      @apply text-16 sm:text-18 md:text-20 lg:text-24 leading-140 sm:leading-135 font-400 font-w-100;
    }
    h1,
    h2,
    h4,
    h5 {
      b,
      strong {
        @apply font-inherit;
      }
    }
    h3 {
      b,
      strong {
        @apply !font-560;
      }
    }

    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;
    }
  }
}

@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%;
  }
}
