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

@layer base {
  :root {
    --color-black: 0 0 0;
    --color-white: 255 255 255;
    --color-theme: 247 147 221; /* #F793DD */
    --color-biege: 250 249 245; /* rgba(250, 249, 245,1)*/
    --color-gray: #808080;
    --color-dark: 26 26 26;
    --color-bg-light: 255 253 252;
    --color-bg-light-2: 247 245 244;
    --color-base-400-text-gray: 153 153 153; /* #999999*/
    --color-red: 249 73 67 /*#F94942*/;
  }
}
@layer components {
  /* ._grid {
    @apply grid grid-cols-12 gap-x-12 mobile:grid-cols-4 mobile:gap-x-8;
  } */
  ._grid {
    @apply grid grid-cols-12 gap-x-12 px-6 mobile:grid-cols-4 mobile:gap-x-8 mobile:px-4;
  }

  .hover-fade-in {
    @apply duration-300 hover:opacity-60;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* ------------------------------------ */
  /* UI Kit */
  /* ------------------------------------ */

  .P3 {
    @apply font-sans text-[0.6875rem] leading-4 -tracking-36;
  }
  .T1,
  .T2,
  .T3 {
    @apply font-sans text-[.6875rem] leading-[0.75rem] -tracking-36;
  }

  /* .T1 {
    @apply font-sans text-base leading-none -tracking-36;
  } */
  .T1-input {
    @apply font-sans text-[0.6875rem] leading-3 -tracking-36 mobile:text-base mobile:leading-none;
  }

  /* .T2 {
    @apply font-sans text-[0.8125rem] leading-[0.875rem] -tracking-36;
  } */
  .T2-accent {
    @apply font-serif-2-regular text-[0.8125rem] leading-none;
  }
  /* .T3 {
    @apply font-sans text-[0.6875rem] leading-3 -tracking-36;
  } */
  .T3-medium {
    @apply font-sans text-[0.6875rem] font-medium leading-3 -tracking-36;
  }
  .T4 {
    @apply font-sans text-[0.625rem] leading-none -tracking-36;
  }

  /* ------------------------------------ */

  .H1,
  .H2,
  .H3 {
    @apply font-serif-2-regular;
  }
  .H1-light,
  .H2-light,
  .H3-light {
    @apply font-serif-2-light;
  }
  .H1-thin,
  .H2-thin,
  .H3-thin {
    @apply font-serif-2-thin;
  }
  .H1,
  .H1-light,
  .H1-thin {
    @apply text-[6rem] leading-none -tracking-32 mobile:text-[4rem];
  }

  .H2,
  .H2-light,
  .H2-thin {
    @apply text-[4rem] leading-none -tracking-24 mobile:text-[2.75rem];
  }

  .H3,
  .H3-light,
  .H3-thin {
    @apply text-[3rem] leading-none -tracking-16 mobile:text-[2rem];
  }

  /* --------------------------------- */

  .H0-accent {
    @apply font-serif text-[7.5rem] leading-none mobile:text-7xl;
  }
  .H1-accent {
    @apply font-serif text-[5rem] leading-none mobile:text-[3.25rem];
  }
  .H2-accent {
    @apply font-serif text-[3.25rem] leading-none mobile:text-[2.25rem];
  }
  .H3-accent {
    @apply font-serif text-[2.5rem] leading-none mobile:text-[1.75rem];
  }
}