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

::selection {
  background-color: theme(colors.B200 / 30%);
}

@layer components {
  .text-shadow-S100 {
    text-shadow:
      0px 1px 3px rgba(10, 29, 69, 0.16),
      0px 0px 1px rgba(10, 29, 69, 0.16);
  }
}

.text-style-R50 {
  @apply font-sans text-50 font-regular leading-50 tracking-50;
}
.text-style-M50 {
  @apply font-sans text-50 font-medium leading-50 tracking-50;
}
.text-style-B50 {
  @apply font-sans text-50 font-bold leading-50 tracking-50;
}

.text-style-R75 {
  @apply font-sans text-75 font-regular leading-75 tracking-75;
}
.text-style-M75 {
  @apply font-sans text-75 font-medium leading-75 tracking-75;
}
.text-style-B75 {
  @apply font-sans text-75 font-bold leading-75 tracking-75;
}

.text-style-R100 {
  @apply font-sans text-100 font-regular leading-100 tracking-100;
}
.text-style-M100 {
  @apply font-sans text-100 font-medium leading-100 tracking-100;
}
.text-style-B100 {
  @apply font-sans text-100 font-bold leading-100 tracking-100;
}

.text-style-R200 {
  @apply font-sans text-200 font-regular leading-200 tracking-200;
}
.text-style-M200 {
  @apply font-sans text-200 font-medium leading-200 tracking-200;
}
.text-style-B200 {
  @apply font-sans text-200 font-bold leading-200 tracking-200;
}

.text-style-R300 {
  @apply font-sans text-300 font-regular leading-300 tracking-300;
}
.text-style-M300 {
  @apply font-sans text-300 font-medium leading-300 tracking-300;
}
.text-style-B300 {
  @apply font-sans text-300 font-bold leading-300 tracking-300;
}

.text-style-R400 {
  @apply font-sans text-400 font-regular leading-400 tracking-400;
}
.text-style-M400 {
  @apply font-sans text-400 font-medium leading-400 tracking-400;
}
.text-style-B400 {
  @apply font-sans text-400 font-bold leading-400 tracking-400;
}

.text-style-R500 {
  @apply font-sans text-500 font-regular leading-500 tracking-500;
}
.text-style-M500 {
  @apply font-sans text-500 font-medium leading-500 tracking-500;
}
.text-style-B500 {
  @apply font-sans text-500 font-bold leading-500 tracking-500;
}

.text-style-R600 {
  @apply font-sans text-600 font-regular leading-600 tracking-600;
}
.text-style-M600 {
  @apply font-sans text-600 font-medium leading-600 tracking-600;
}
.text-style-B600 {
  @apply font-sans text-600 font-bold leading-600 tracking-600;
}

.text-style-R700 {
  @apply font-sans text-700 font-regular leading-700 tracking-700;
}
.text-style-M700 {
  @apply font-sans text-700 font-medium leading-700 tracking-700;
}
.text-style-B700 {
  @apply font-sans text-700 font-bold leading-700 tracking-700;
}

.text-style-R800 {
  @apply font-sans text-800 font-regular leading-800 tracking-800;
}
.text-style-M800 {
  @apply font-sans text-800 font-medium leading-800 tracking-800;
}
.text-style-B800 {
  @apply font-sans text-800 font-bold leading-800 tracking-800;
}

.text-style-R900 {
  @apply font-sans text-900 font-regular leading-900 tracking-900;
}
.text-style-M900 {
  @apply font-sans text-900 font-medium leading-900 tracking-900;
}
.text-style-B900 {
  @apply font-sans text-900 font-bold leading-900 tracking-900;
}
