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

/* ======= */
/* DISPLAY */
/* ======= */
/*
    900, 800. 700, 600, 500, 400, 300, 200, 100, 50
*/
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-Black.ttf");
    font-weight: 900;
    font-style: normal;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-ExtraBold.ttf");
    font-weight: 800;
    font-style: normal;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-Medium.ttf");
    font-weight: 500;
    font-style: normal;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-Light.ttf");
    font-weight: 300;
    font-style: normal;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-ExtraLight.ttf");
    font-weight: 200;
    font-style: normal;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-Thin.ttf");
    font-weight: 100;
    font-style: normal;
}

/* ======= */
/* ITALIC */
/* ======= */
/*
    900, 800. 700, 600, 500, 400, 300, 200, 100, 50
*/

@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-BlackItalic.otf");
    font-weight: 900;
    font-style: italic;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-ExtraBoldItalic.otf");
    font-weight: 800;
    font-style: italic;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-BoldItalic.otf");
    font-weight: 700;
    font-style: italic;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-MediumItalic.otf");
    font-weight: 500;
    font-style: italic;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-Italic.otf");
    font-weight: 400;
    font-style: italic;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-LightItalic.otf");
    font-weight: 300;
    font-style: italic;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-ExtraLightItalic.otf");
    font-weight: 200;
    font-style: italic;
}
@font-face{
    font-family:"inter";
    font-display: swap;
    src:url("/assets/fonts/inter/Inter-ThinItalic.otf");
    font-weight: 100;
    font-style: italic;
}

/* =========== */
/* HANDWRITTEN */
/* =========== */
/*
    600, 400
*/
@font-face{
    font-family:"handwritten";
    src:url("/assets/fonts/handwritten/LushHandwritten_WLat_Bd.eot?#iefix");
    src:url("/assets/fonts/handwritten/LushHandwritten_WLat_Bd.eot?#iefix") format("eot"),
        url("/assets/fonts/handwritten/LushHandwritten_WLat_Bd.woff") format("woff"),
        url("/assets/fonts/handwritten/LushHandwritten_WLat_Bd.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face{
    font-family:"handwritten";
    src:url("/assets/fonts/handwritten/LushHandwritten_WLat_Rg.eot?#iefix");
    src:url("/assets/fonts/handwritten/LushHandwritten_WLat_Rg.eot?#iefix") format("eot"),
        url("/assets/fonts/handwritten/LushHandwritten_WLat_Rg.woff") format("woff"),
        url("/assets/fonts/handwritten/LushHandwritten_WLat_Rg.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* Root variables */

:root {
    --font-handwritten: "handwritten", sans-serif;
    --font-inter: "inter", sans-serif;
    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #6CAEE7;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 5px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #6CAEE7, 0 0 5px #6CAEE7;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #6CAEE7;
  border-left-color: #6CAEE7;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@layer utilities {
    .all-unset {
        all: unset;
    }

    .h-dvh {
    height: 100vh;
    height: 100dvh;
  }

  .min-h-dvh {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .max-h-dvh {
    max-height: 100vh;
    max-height: 100dvh;
  }

  .h-svh {
    height: 100vh;
    height: 100svh;
  }

  .min-h-svh {
    min-height: 100vh;
    min-height: 100svh;
  }

  .max-h-svh {
    max-height: 100vh;
    max-height: 100svh;
  }

  .h-lvh {
    height: 100vh;
    height: 100lvh;
  }

  .min-h-lvh {
    min-height: 100vh;
    min-height: 100lvh;
  }

  .max-h-lvh {
    max-height: 100vh;
    max-height: 100lvh;
  }
}

@layer components {
    /* Headline 1 */
    .text-headline-one {
        @apply
        /* Default */
        font-bold text-[48px] leading-[58px] tracking-[-1px] font-text
        /* md */
        md:text-[80px] md:leading-[90px] md:tracking-[-1px]
        /* lg */
        lg:text-[110px] lg:leading-[110px] lg:tracking-[-1px];
    }

    /* Headline 2 */
    .text-headline-two {
        @apply
        /* Default */
        font-bold text-[38px] leading-[48px] tracking-[-0.5px] font-text
        /* md */
        md:text-[48px] md:leading-[58px] md:tracking-[-0.5px]
        /* lg */
        lg:text-[60px] lg:leading-[72px] lg:tracking-[-0.5px];
    }

    /* Headline 3 */
    .text-headline-three {
        @apply
        /* Default */
        font-bold text-[28px] leading-[38px] tracking-[0px] font-text
        /* md */
        md:text-[38px] md:leading-[48px] md:tracking-[0px]
        /* lg */
        lg:text-[38px] lg:leading-[48px] lg:tracking-[0px];
    }

    /* product name */
      .text-product-name {
      @apply font-bold text-[18px] leading-[20px] tracking-[0.5px] font-handwritten;
    }

    /* Subtitle 1 */
    .text-subtitle-one {
        @apply font-bold text-[30px] leading-[40px] tracking-[-0.5px] font-text;
    }

    /* Subtitle 2 */
    .text-subtitle-two {
        @apply font-bold text-[24px] leading-[34px] tracking-[-0.5px] font-text;
    }

    /* Subtitle 3 */
    .text-subtitle-three {
        @apply font-bold text-[18px] leading-[28px] tracking-[0px] font-text;
    }

    /* Paragraph Regular */
    .text-paragraph-regular {
        @apply font-normal text-[16px] leading-[26px] tracking-[0px] font-text;
    }

    /* Paragraph Bold */
    .text-paragraph-bold {
        @apply font-bold text-[16px] leading-[26px] tracking-[0px] font-text;
    }

    /* Paragraph Small */
    .text-paragraph-small {
        @apply font-normal text-[14px] leading-[24px] tracking-[0px] font-text;
    }

    /* Label */
    .text-label {
        @apply font-normal text-[11px] leading-[16px] tracking-[0.5px] uppercase font-text;
    }

    /* Attribute */
    .text-attribute {
        @apply font-normal text-[11px] leading-[16px] tracking-[1px] font-text;
    }

    /* Caption */
    .text-caption-regular {
        @apply font-normal text-[12px] leading-[16px] tracking-[0.5px] font-text;
    }
    .text-caption-medium {
        @apply font-medium text-[12px] leading-[16px] tracking-[0.5px] font-text;
    }
    .text-caption-bold {
        @apply font-bold text-[12px] leading-[16px] tracking-[0px] font-text;
    }

    /* Price */
    .text-price {
        @apply font-normal text-[13px] leading-[20px] tracking-[0px] font-text;
    }

    /* Container Spacing */
    .px-container {
        @apply
        /* default */
        px-[theme(spacing.container.default)]
        /* mobile-s */
        mobile-s:px-[theme(spacing.container.mobile-s)]
        /* mobile */
        mobile:px-[theme(spacing.container.mobile)]
        /* tablet-s */
        tablet:px-[theme(spacing.container.tablet-s)]
        /* tablet */
        tablet:px-[theme(spacing.container.tablet)]
        /* tablet-landscape-s */
        tablet-landscape-s:px-[theme(spacing.container.tablet-landscape-s)]
        /* tablet-landscape */
        tablet-landscape:px-[theme(spacing.container.tablet-landscape)]
        /* laptop-s */
        laptop-s:px-[theme(spacing.container.laptop-s)]
        /* laptop */
        laptop:px-[theme(spacing.container.laptop)]
        /* desktop-s */
        desktop-s:px-[theme(spacing.container.desktop-s)]
        /* desktop */
        desktop:px-[theme(spacing.container.desktop)];
    }

    .mx-container {
        @apply
        /* default */
        mx-[theme(spacing.container.default)]
        /* mobile-s */
        mobile-s:mx-[theme(spacing.container.mobile-s)]
        /* mobile */
        mobile:mx-[theme(spacing.container.mobile)]
        /* tablet-s */
        tablet-s:mx-[theme(spacing.container.tablet-s)]
        /* tablet */
        tablet:mx-[theme(spacing.container.tablet)]
        /* tablet-landscape-s */
        tablet-landscape-s:mx-[theme(spacing.container-tablet-landscape-s)]
        /* tablet-landscape */
        tablet-landscape:mx-[theme(spacing.container.tablet-landscape)]
        /* laptop-s */
        laptop-s:mx-[theme(spacing.container.laptop-s)]
        /* laptop */
        laptop:mx-[theme(spacing.container.laptop)]
        /* desktop-s */
        desktop-s:mx-[theme(spacing.container.desktop-s)]
        /* desktop */
        desktop:mx-[theme(spacing.container.desktop)];
    }
}