@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");
:root {
  font-family: "Montserrat", sans-serif;

  --PRIMARY-DARK5: #000063;
  --PRIMARY-DARK4: #00007c;
  --PRIMARY-DARK3: #150096;
  --PRIMARY-DARK2: #2e13af;
  --PRIMARY-DARK1: #482dc9;
  --PRIMARY: #6146e2;
  --PRIMARY-LIGHT1: #7b60fc;
  --PRIMARY-LIGHT2: #9479ff;
  --PRIMARY-LIGHT3: #ae93ff;
  --PRIMARY-LIGHT4: #c7acff;
  --PRIMARY-LIGHT5: #e0c5ff;
  --PRIMARY-BG: #f6edff;

  --VARIANT-1-DARK2: #f45b19;
  --VARIANT-1-DARK1: #f4afa1;
  --VARIANT-1: #f7c0b5;
  --VARIANT-1-LIGHT1: #ffdacf;
  --VARIANT-1-LIGHT2: #fff3e8;

  --VARIANT-2-DARK2: #1a8d1a;
  --VARIANT-2-DARK1: #a6dcd5;
  --VARIANT-2: #b5e2dc;
  --VARIANT-2-LIGHT1: #cffcf6;
  --VARIANT-2-LIGHT2: #e8ffff;

  --VARIANT-3-DARK2: #ed9f3a;
  --VARIANT-3-DARK1: #f2d380;
  --VARIANT-3: #f4da92;
  --VARIANT-3-LIGHT1: #fff4ac;
  --VARIANT-3-LIGHT2: #ffffdf;

  --WHITE: #f0f0f0;
  --WHITE-OPACITY-C: #f0f0f0cc;
  --WHITE-OPACITY-A: #f0f0f0aa;

  --BLACK-BG: #232128;
  --BLACK: #1f1f1f;
  --BLACK-OPACITY-C: #1f1f1fcc;
  --BLACK-OPACITY-A: #1f1f1faa;

  --GRAY: #b0b0b0;
  --GRAY-DARK: #909090;

  --INPUT-WRONG: #ff0000;
  --INPUT-RIGHT: #008000;
  --PRICE-OFFER: #fa1a1a;

  /* PRISM HIGHLIGHT */
  --CARBON: #2d2b55;
  --CODE-ORANGE: #ff9d00;
  --CODE-BLUE: #9effff;
  --CODE-GREEN: #a5ff90;
  --CODE-COMMENT: #b362ff;
  /* PRISM HIGHLIGHT */

  /* VAR to override */
  --BG: var(--WHITE);
  --TEXT: var(--BLACK);
  --SHADE: #e0e0e0;
}
html[sui-mode="light"] {
  --BG: var(--WHITE);
  --TEXT: var(--BLACK);
  --SHADE: #e0e0e0;
}
html[sui-mode="dark"] {
  --BG: var(--BLACK);
  --TEXT: var(--WHITE);
  --SHADE: #0e0e0e;
}
.sui_v1 {
  background: var(--VARIANT-1);
  color: var(--BLACK);
}
.sui_v2 {
  background: var(--VARIANT-2);
  color: var(--BLACK);
}
.sui_v3 {
  background: var(--VARIANT-3);
  color: var(--BLACK);
}
.sui_color_text_p {
  color: var(--PRIMARY);
}
.sui_color_text_v1 {
  color: var(--VARIANT-1-DARK2);
}
.sui_color_text_v2 {
  color: var(--VARIANT-2-DARK2);
}
.sui_color_text_v3 {
  color: var(--VARIANT-3-DARK2);
}
.sui_color_bg_p {
  color: var(--WHITE);
  background: var(--PRIMARY);
}
.sui_color_bg_v1 {
  color: var(--WHITE);
  background: var(--VARIANT-1-DARK2);
}
.sui_color_bg_v2 {
  color: var(--WHITE);
  background: var(--VARIANT-2-DARK2);
}
.sui_color_bg_v3 {
  color: var(--WHITE);
  background: var(--VARIANT-3-DARK2);
}
/* Typography */
h1,
.h1 {
  font-size: 4.8rem;
}
h2,
.h2 {
  font-size: 3.2rem;
}
h3,
.h3 {
  font-size: 2.4rem;
}
h4,
.h4 {
  font-size: 2rem;
}
h5,
.h5 {
  font-size: 1.6rem;
}
p,
.p {
  font-size: 1.2rem;
}
.font_weight_300 {
  font-weight: 300;
}
.font_weight_400 {
  font-weight: 400;
}
.font_weight_500 {
  font-weight: 500;
}
.font_weight_600 {
  font-weight: 600;
}
.font_weight_700 {
  font-weight: 700;
}
.font_weight_800 {
  font-weight: 800;
}
.font_weight_900 {
  font-weight: 900;
}
/* FLEX */
.flex_row {
  display: flex;
}
.flex_column {
  display: flex;
  flex-direction: column;
}
.flex_align_center {
  align-items: center;
}
.flex_align_start {
  align-items: flex-start;
}
.flex_align_end {
  align-items: flex-end;
}
.flex_justify_center {
  justify-content: center;
}
.flex_justify_around {
  justify-content: space-around;
}
.flex_justify_between {
  justify-content: space-between;
}
.flex_wrap {
  flex-wrap: wrap;
}
.flex_gap1 {
  gap: 1rem;
}
.flex_gap15 {
  gap: 1.5rem;
}
.flex_gap2 {
  gap: 2rem;
}