@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Benoa";
  src: url("../fonts/BenoaMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --font-main: "Montserrat", sans-serif;
  --font-seccondary: "Benoa", sans-serif;

  /* Colors */
  --color-primary: oklch(82.895% 0.14276 83.638);
  --color-seccondary: oklch(57.371% 0.10546 151.442);
  --color-seccondary-dark: oklch(28.803% 0.02092 153.465);
  --color-light: oklch(100% 0.00011 271.152);
  --color-support: oklch(91.826% 0.02529 111.859);
  --color-support-2: oklch(95.389% 0.05033 89.761);
  --color-support-3: oklch(90.081% 0.00282 84.328);
  --color-wa: oklch(76.096% 0.20144 149.762);

  /* Unit */
  --space-unit: 1rem;

  /* Paddings */
  --p-sm: calc(var(--space-unit) * 0.5); /* 8px */
  --p-md: var(--space-unit); /* 16px */
  --p-lg: calc(var(--space-unit) * 1.5); /* 24px */
  --p-xl: calc(var(--space-unit) * 3); /* 48px */

  /* Margins */
  --m-sm: calc(var(--space-unit) * 0.5); /* 8px */
  --m-md: var(--space-unit);
  --m-lg: calc(var(--space-unit) * 1.5); /* 24px */
  --m-xl: calc(var(--space-unit) * 3); /* 48px */

  /* Shadow */
  --sh-normal: -4px 4px 24px 4px rgba(0, 0, 0, 0.15);

  /* Transition */
  --tr-short: 0.3s;
  --tr-simple: ease;
}

/* ==========================================
   Breakpoints - Mobile First

   Base : 0px
   sm   : 576px
   md   : 768px
   lg   : 992px
   xl   : 1200px
   xxl  : 1400px

========================================== */