@font-face {
  font-family: "Red Rose";
  src: url("./public/fonts/RedRose-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Rose";
  src: url("./public/fonts/RedRose-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Rose";
  src: url("./public/fonts/RedRose-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Rose";
  src: url("./public/fonts/RedRose-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Rose";
  src: url("./public/fonts/RedRose-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: normal;
  min-width: var(--min-w-320);
  background-color: var(--color-gainsboro);
  overflow-x: hidden;
  font-family: var(--font-red-rose);
}

html {
  scroll-behavior: smooth;
}

button,
input,
textarea,
select {
  font: inherit;
}

img {
  max-width: 100%;
  display: block;
}

:root {
  /* Figma Variables */

  /* Spacing */
  --Corner-Large: 16px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --radius-md: 8px;
  --Space-400: 16px;

  /* Color */
  --Colors-Base-black: #000;
  --Colors-Base-white: #fff;

  /* Common Style Variables */

  /* Color */
  --color-crimson: #d90d32;
  --color-darkgray: #94969c;
  --color-darkslategray-100: #475467;
  --color-darkslategray-200: #363636;
  --color-darkslategray-300: #313131;
  --color-dimgray-100: #5f5f5f;
  --color-dimgray-200: #5e5e5e;
  --color-firebrick-100: #c52026;
  --color-firebrick-200: #a20e20;
  --color-firebrick-300: rgba(162, 14, 32, 0.2);
  --color-firebrick-400: rgba(162, 14, 32, 0.1);
  --color-gainsboro: #e0e3ec;
  --color-gray-100: #2c2c2c;
  --color-gray-200: #272727;
  --color-gray-300: #1f242f;
  --color-gray-400: #161134;
  --color-gray-500: #101828;
  --color-gray-600: #160e35;
  --color-gray-700: #12151f;
  --color-gray-800: #0c111d;
  --color-gray-900: rgba(255, 255, 255, 0.9);
  --color-gray-1000: rgba(255, 255, 255, 0.6);
  --color-gray-1100: rgba(255, 255, 255, 0.8);
  --color-lightgray: #cecece;
  --color-slateblue: #6941c6;
  --color-whitesmoke: #eaecf0;

  /* Gap */
  --gap-4: 4px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-14: 14px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-32: 32px;
  --gap-64: 64px;
  --gap-85: 85px;

  /* Padding */
  --padding-0: 0px;
  --padding-2: 2px;
  --padding-10: 10px;
  --padding-12: 12px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-22: 22px;
  --padding-24: 24px;
  --padding-26: 26px;
  --padding-32: 32px;
  --padding-40: 40px;
  --padding-64: 64px;
  --padding-80: 80px;
  --page-max-width: 1440px;
  --page-content-width: 1320px;
  --page-gutter: clamp(20px, 4vw, 72px);

  /* BorderRadius */
  --br-12: 12px;
  --br-14: 14px;
  --br-16: 16px;
  --br-20: 20px;
  --br-28: 28px;
  --br-22369600: 22369600px;

  /* Font */
  --font-inter: "Red Rose";
  --font-poppins: "Red Rose";
  --font-red-rose: "Red Rose";

  /* FontSize */
  --fs-12: 12px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-26: 26px;
  --fs-35: 35px;
  --fs-36: 36px;
  --fs-44: 44px;
  --fs-48: 48px;
  --fs-60: 60px;

  /* Shadows */
  --Shadows-shadow-lg:
    0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --Shadows-shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);

  /* WidthHeights */
  --height-1: 1px;
  --height-8: 8px;
  --height-16: 16px;
  --height-20: 20px;
  --height-24: 24px;
  --height-26: 26px;
  --height-40: 40px;
  --height-44: 44px;
  --height-60: 60px;
  --max-w-1280: 1280px;
  --min-w-320: 320px;
  --width-1: 1px;
  --width-8: 8px;
  --width-14: 14px;
  --width-20: 20px;
  --width-24: 24px;
  --width-40: 40px;
  --width-64: 64px;
  --width-208: 208px;
  --width-1280: 1280px;

  /* LineHeights */
  --lh-18: 18px;
  --lh-20: 20px;
  --lh-24: 24px;
  --lh-26: 26px;
  --lh-28: 28px;
  --lh-32: 32px;
  --lh-42: 42px;
  --lh-43: 43px;
  --lh-46: 46px;
  --lh-48: 48px;
  --lh-53: 53px;
  --lh-72: 72px;

  /* LetterSpacings */
  --ls--0_02: -0.02;
}