@charset "UTF-8";
/*
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
This is the main (global) css file used throughout the project - that                  ◼️
sets out the general desing language, such as: margins/paddings/colors that            ◼️
are generally used throughout the project in a consistant and repetetive manner.       ◼️
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
> Version | 0.5                                                                        ◼️
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
*/
/* #region ➤ [MAIN] [ROOT] Layout */
/*
### NOTE:
### Betarena Scores 'root:' values.
### SEE:
### https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
*/
:root {
  /*
  ╭──────────────────────────────────────────────────────────────────╮
  │ 📌 DIMENSIONS                                                    │
  ╰──────────────────────────────────────────────────────────────────╯
  */
  --app-height: 100%;
  /*
  ╭──────────────────────────────────────────────────────────────────╮
  │ 📌 COLORS                                                        │
  ╰──────────────────────────────────────────────────────────────────╯
  */
  --white: #ffffff;
  --whitev2: #f2f2f2;
  --white-3: #F7F7F7;
  --white-4: #D9D9D9;
  --primary: #f5620f;
  --primary-fade: #f77c42;
  --primary-fade-2: #D25E27;
  --secondary: #37474f;
  --blue: #0085ff;
  --red: #c62828;
  --red-bright: #ff3c3c;
  --red-bright-v2: #FF5F5F;
  --red-error: #ff0000;
  --green-success: #009406;
  --green-color: #59C65D;
  --green-1: #4DA025;
  --theme-color: #e3e3e3;
  --grey-color: #e6e6e6;
  --grey-shade: #cccccc;
  --grey-shade-2: #a8a8a8;
  --grey-shade-3: #C1C1C1;
  --grey-shade-4: #7E7E7E;
  --yellow-gold: #FFB904;
  --black: #000000;
  --dark: #121212;
  --grey: #8c8c8c;
  --background-surface: #121212;
  --dark-theme: #292929;
  --dark-theme-1: #4b4b4b;
  --dark-theme-1-shade: #616161;
  --dark-theme-1-2-shade: #737373;
  --dark-theme-1-3-shade: #999999;
  --dark-theme-1-4-shade: #383838;
  --dark-theme-1-7-shade: #313131;
  --dark-theme-1-5-shade: #161616;
  --dark-theme-1-6-shade: #4D4D4D;
  --dark-theme-1-5-shade-o-0-2: rgba(22, 22, 22, 0.2);
  --dark-theme-1-5-shade-o-0-5: rgba(75, 75, 75, 0.5);
  /*
  ╭──────────────────────────────────────────────────────────────────╮
  │ 📌 COMMON BREAKPOINTS                                            │
  ╰──────────────────────────────────────────────────────────────────╯
  */
  --mobile: 375;
  --tablet: 767;
  --desktop: 1440;
  /*
  ╭──────────────────────────────────────────────────────────────────╮
  │ 📌 MISC.                                                         │
  ╰──────────────────────────────────────────────────────────────────╯
  */
  --oragne-pale-bg: rgba(247, 124, 66, 0.2);
  --header-is-mobile: false;
}

/* #endregion ➤ [MAIN] [ROOT] Layout */
/* #region ➤ [MAIN] Website Layout */
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0 !important;
  background-color: var(--white);
  scroll-behavior: smooth !important;
}

body {
  color: var(--black);
  background-color: var(--whitev2);
  margin: 0 !important;
  font-family: Roboto;
  font-size: 14px;
  line-height: 1.5;
  /*
     MOBILE
     disable pinchin & user zooming on */
  /* touch-action: pan-x pan-y; */
  /*
  SAFARI */
  -webkit-text-size-adjust: none;
}
body.disable-scroll {
  /* 🎨 style */
  overflow: hidden;
  height: 100%;
}

a {
  text-decoration: none !important;
  color: inherit;
  display: flex;
}
a.disable-anchor {
  pointer-events: none;
}

.inter-font {
  font-family: Inter;
}

p {
  font-style: normal;
  font-weight: 400; /* 400 / 500 */
  line-height: 150%;
  margin: 0;
  color: var(--dark-theme);
}

/* MOBILE VIEW OVERFLOW HIDDEN */
@media only screen and (max-width: 375px) {
  html,
  body {
    overflow-x: hidden;
  }
}
/*
### NOTE:
### zoom-out-mobiles-input-form
### SEE:
### https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
*/
@supports (-webkit-overflow-scrolling: touch) {
  form input:active,
  input:active {
    font-size: 16px !important;
  }
}
/* #endregion ➤ [MAIN] Website Layout */
/* #region ➤ [MAIN] [MARGINS] Website Layout */
.m-0 {
  margin: 0;
}

.m-r-1 {
  margin-right: 1px;
}
.m-r-2 {
  margin-right: 2px;
}
.m-r-3 {
  margin-right: 3px;
}
.m-r-4 {
  margin-right: 4px;
}
.m-r-5 {
  margin-right: 5px;
}
.m-r-6 {
  margin-right: 6px;
}
.m-r-7 {
  margin-right: 7px;
}
.m-r-8 {
  margin-right: 8px;
}
.m-r-9 {
  margin-right: 9px;
}
.m-r-10 {
  margin-right: 10px;
}
.m-r-11 {
  margin-right: 11px;
}
.m-r-12 {
  margin-right: 12px;
}
.m-r-13 {
  margin-right: 13px;
}
.m-r-14 {
  margin-right: 14px;
}
.m-r-15 {
  margin-right: 15px;
}
.m-r-16 {
  margin-right: 16px;
}
.m-r-17 {
  margin-right: 17px;
}
.m-r-18 {
  margin-right: 18px;
}
.m-r-19 {
  margin-right: 19px;
}
.m-r-20 {
  margin-right: 20px;
}
.m-r-21 {
  margin-right: 21px;
}
.m-r-22 {
  margin-right: 22px;
}
.m-r-23 {
  margin-right: 23px;
}
.m-r-24 {
  margin-right: 24px;
}
.m-r-25 {
  margin-right: 25px;
}
.m-r-26 {
  margin-right: 26px;
}
.m-r-27 {
  margin-right: 27px;
}
.m-r-28 {
  margin-right: 28px;
}
.m-r-29 {
  margin-right: 29px;
}
.m-r-30 {
  margin-right: 30px;
}
.m-r-31 {
  margin-right: 31px;
}
.m-r-32 {
  margin-right: 32px;
}
.m-r-33 {
  margin-right: 33px;
}
.m-r-34 {
  margin-right: 34px;
}
.m-r-35 {
  margin-right: 35px;
}
.m-r-36 {
  margin-right: 36px;
}
.m-r-37 {
  margin-right: 37px;
}
.m-r-38 {
  margin-right: 38px;
}
.m-r-39 {
  margin-right: 39px;
}
.m-r-40 {
  margin-right: 40px;
}
.m-r-41 {
  margin-right: 41px;
}
.m-r-42 {
  margin-right: 42px;
}
.m-r-43 {
  margin-right: 43px;
}
.m-r-44 {
  margin-right: 44px;
}
.m-r-45 {
  margin-right: 45px;
}
.m-r-46 {
  margin-right: 46px;
}
.m-r-47 {
  margin-right: 47px;
}
.m-r-48 {
  margin-right: 48px;
}
.m-r-49 {
  margin-right: 49px;
}
.m-r-50 {
  margin-right: 50px;
}
.m-r-51 {
  margin-right: 51px;
}
.m-r-52 {
  margin-right: 52px;
}
.m-r-53 {
  margin-right: 53px;
}
.m-r-54 {
  margin-right: 54px;
}
.m-r-55 {
  margin-right: 55px;
}
.m-r-56 {
  margin-right: 56px;
}
.m-r-57 {
  margin-right: 57px;
}
.m-r-58 {
  margin-right: 58px;
}
.m-r-59 {
  margin-right: 59px;
}
.m-r-60 {
  margin-right: 60px;
}
.m-r-61 {
  margin-right: 61px;
}
.m-r-62 {
  margin-right: 62px;
}
.m-r-63 {
  margin-right: 63px;
}
.m-r-64 {
  margin-right: 64px;
}
.m-r-65 {
  margin-right: 65px;
}
.m-r-66 {
  margin-right: 66px;
}
.m-r-67 {
  margin-right: 67px;
}
.m-r-68 {
  margin-right: 68px;
}
.m-r-69 {
  margin-right: 69px;
}
.m-r-70 {
  margin-right: 70px;
}
.m-r-71 {
  margin-right: 71px;
}
.m-r-72 {
  margin-right: 72px;
}
.m-r-73 {
  margin-right: 73px;
}
.m-r-74 {
  margin-right: 74px;
}
.m-r-75 {
  margin-right: 75px;
}
.m-r-76 {
  margin-right: 76px;
}
.m-r-77 {
  margin-right: 77px;
}
.m-r-78 {
  margin-right: 78px;
}
.m-r-79 {
  margin-right: 79px;
}
.m-r-80 {
  margin-right: 80px;
}
.m-r-81 {
  margin-right: 81px;
}
.m-r-82 {
  margin-right: 82px;
}
.m-r-83 {
  margin-right: 83px;
}
.m-r-84 {
  margin-right: 84px;
}
.m-r-85 {
  margin-right: 85px;
}
.m-r-86 {
  margin-right: 86px;
}
.m-r-87 {
  margin-right: 87px;
}
.m-r-88 {
  margin-right: 88px;
}
.m-r-89 {
  margin-right: 89px;
}
.m-r-90 {
  margin-right: 90px;
}
.m-r-91 {
  margin-right: 91px;
}
.m-r-92 {
  margin-right: 92px;
}
.m-r-93 {
  margin-right: 93px;
}
.m-r-94 {
  margin-right: 94px;
}
.m-r-95 {
  margin-right: 95px;
}
.m-r-96 {
  margin-right: 96px;
}
.m-r-97 {
  margin-right: 97px;
}
.m-r-98 {
  margin-right: 98px;
}
.m-r-99 {
  margin-right: 99px;
}
.m-r-100 {
  margin-right: 100px;
}

.m-l-1 {
  margin-left: 1px;
}
.m-l-2 {
  margin-left: 2px;
}
.m-l-3 {
  margin-left: 3px;
}
.m-l-4 {
  margin-left: 4px;
}
.m-l-5 {
  margin-left: 5px;
}
.m-l-6 {
  margin-left: 6px;
}
.m-l-7 {
  margin-left: 7px;
}
.m-l-8 {
  margin-left: 8px;
}
.m-l-9 {
  margin-left: 9px;
}
.m-l-10 {
  margin-left: 10px;
}
.m-l-11 {
  margin-left: 11px;
}
.m-l-12 {
  margin-left: 12px;
}
.m-l-13 {
  margin-left: 13px;
}
.m-l-14 {
  margin-left: 14px;
}
.m-l-15 {
  margin-left: 15px;
}
.m-l-16 {
  margin-left: 16px;
}
.m-l-17 {
  margin-left: 17px;
}
.m-l-18 {
  margin-left: 18px;
}
.m-l-19 {
  margin-left: 19px;
}
.m-l-20 {
  margin-left: 20px;
}
.m-l-21 {
  margin-left: 21px;
}
.m-l-22 {
  margin-left: 22px;
}
.m-l-23 {
  margin-left: 23px;
}
.m-l-24 {
  margin-left: 24px;
}
.m-l-25 {
  margin-left: 25px;
}
.m-l-26 {
  margin-left: 26px;
}
.m-l-27 {
  margin-left: 27px;
}
.m-l-28 {
  margin-left: 28px;
}
.m-l-29 {
  margin-left: 29px;
}
.m-l-30 {
  margin-left: 30px;
}
.m-l-31 {
  margin-left: 31px;
}
.m-l-32 {
  margin-left: 32px;
}
.m-l-33 {
  margin-left: 33px;
}
.m-l-34 {
  margin-left: 34px;
}
.m-l-35 {
  margin-left: 35px;
}
.m-l-36 {
  margin-left: 36px;
}
.m-l-37 {
  margin-left: 37px;
}
.m-l-38 {
  margin-left: 38px;
}
.m-l-39 {
  margin-left: 39px;
}
.m-l-40 {
  margin-left: 40px;
}
.m-l-41 {
  margin-left: 41px;
}
.m-l-42 {
  margin-left: 42px;
}
.m-l-43 {
  margin-left: 43px;
}
.m-l-44 {
  margin-left: 44px;
}
.m-l-45 {
  margin-left: 45px;
}
.m-l-46 {
  margin-left: 46px;
}
.m-l-47 {
  margin-left: 47px;
}
.m-l-48 {
  margin-left: 48px;
}
.m-l-49 {
  margin-left: 49px;
}
.m-l-50 {
  margin-left: 50px;
}
.m-l-51 {
  margin-left: 51px;
}
.m-l-52 {
  margin-left: 52px;
}
.m-l-53 {
  margin-left: 53px;
}
.m-l-54 {
  margin-left: 54px;
}
.m-l-55 {
  margin-left: 55px;
}
.m-l-56 {
  margin-left: 56px;
}
.m-l-57 {
  margin-left: 57px;
}
.m-l-58 {
  margin-left: 58px;
}
.m-l-59 {
  margin-left: 59px;
}
.m-l-60 {
  margin-left: 60px;
}
.m-l-61 {
  margin-left: 61px;
}
.m-l-62 {
  margin-left: 62px;
}
.m-l-63 {
  margin-left: 63px;
}
.m-l-64 {
  margin-left: 64px;
}
.m-l-65 {
  margin-left: 65px;
}
.m-l-66 {
  margin-left: 66px;
}
.m-l-67 {
  margin-left: 67px;
}
.m-l-68 {
  margin-left: 68px;
}
.m-l-69 {
  margin-left: 69px;
}
.m-l-70 {
  margin-left: 70px;
}
.m-l-71 {
  margin-left: 71px;
}
.m-l-72 {
  margin-left: 72px;
}
.m-l-73 {
  margin-left: 73px;
}
.m-l-74 {
  margin-left: 74px;
}
.m-l-75 {
  margin-left: 75px;
}
.m-l-76 {
  margin-left: 76px;
}
.m-l-77 {
  margin-left: 77px;
}
.m-l-78 {
  margin-left: 78px;
}
.m-l-79 {
  margin-left: 79px;
}
.m-l-80 {
  margin-left: 80px;
}
.m-l-81 {
  margin-left: 81px;
}
.m-l-82 {
  margin-left: 82px;
}
.m-l-83 {
  margin-left: 83px;
}
.m-l-84 {
  margin-left: 84px;
}
.m-l-85 {
  margin-left: 85px;
}
.m-l-86 {
  margin-left: 86px;
}
.m-l-87 {
  margin-left: 87px;
}
.m-l-88 {
  margin-left: 88px;
}
.m-l-89 {
  margin-left: 89px;
}
.m-l-90 {
  margin-left: 90px;
}
.m-l-91 {
  margin-left: 91px;
}
.m-l-92 {
  margin-left: 92px;
}
.m-l-93 {
  margin-left: 93px;
}
.m-l-94 {
  margin-left: 94px;
}
.m-l-95 {
  margin-left: 95px;
}
.m-l-96 {
  margin-left: 96px;
}
.m-l-97 {
  margin-left: 97px;
}
.m-l-98 {
  margin-left: 98px;
}
.m-l-99 {
  margin-left: 99px;
}
.m-l-100 {
  margin-left: 100px;
}

.m-t-1 {
  margin-top: 1px;
}
.m-t-2 {
  margin-top: 2px;
}
.m-t-3 {
  margin-top: 3px;
}
.m-t-4 {
  margin-top: 4px;
}
.m-t-5 {
  margin-top: 5px;
}
.m-t-6 {
  margin-top: 6px;
}
.m-t-7 {
  margin-top: 7px;
}
.m-t-8 {
  margin-top: 8px;
}
.m-t-9 {
  margin-top: 9px;
}
.m-t-10 {
  margin-top: 10px;
}
.m-t-11 {
  margin-top: 11px;
}
.m-t-12 {
  margin-top: 12px;
}
.m-t-13 {
  margin-top: 13px;
}
.m-t-14 {
  margin-top: 14px;
}
.m-t-15 {
  margin-top: 15px;
}
.m-t-16 {
  margin-top: 16px;
}
.m-t-17 {
  margin-top: 17px;
}
.m-t-18 {
  margin-top: 18px;
}
.m-t-19 {
  margin-top: 19px;
}
.m-t-20 {
  margin-top: 20px;
}
.m-t-21 {
  margin-top: 21px;
}
.m-t-22 {
  margin-top: 22px;
}
.m-t-23 {
  margin-top: 23px;
}
.m-t-24 {
  margin-top: 24px;
}
.m-t-25 {
  margin-top: 25px;
}
.m-t-26 {
  margin-top: 26px;
}
.m-t-27 {
  margin-top: 27px;
}
.m-t-28 {
  margin-top: 28px;
}
.m-t-29 {
  margin-top: 29px;
}
.m-t-30 {
  margin-top: 30px;
}
.m-t-31 {
  margin-top: 31px;
}
.m-t-32 {
  margin-top: 32px;
}
.m-t-33 {
  margin-top: 33px;
}
.m-t-34 {
  margin-top: 34px;
}
.m-t-35 {
  margin-top: 35px;
}
.m-t-36 {
  margin-top: 36px;
}
.m-t-37 {
  margin-top: 37px;
}
.m-t-38 {
  margin-top: 38px;
}
.m-t-39 {
  margin-top: 39px;
}
.m-t-40 {
  margin-top: 40px;
}
.m-t-41 {
  margin-top: 41px;
}
.m-t-42 {
  margin-top: 42px;
}
.m-t-43 {
  margin-top: 43px;
}
.m-t-44 {
  margin-top: 44px;
}
.m-t-45 {
  margin-top: 45px;
}
.m-t-46 {
  margin-top: 46px;
}
.m-t-47 {
  margin-top: 47px;
}
.m-t-48 {
  margin-top: 48px;
}
.m-t-49 {
  margin-top: 49px;
}
.m-t-50 {
  margin-top: 50px;
}
.m-t-51 {
  margin-top: 51px;
}
.m-t-52 {
  margin-top: 52px;
}
.m-t-53 {
  margin-top: 53px;
}
.m-t-54 {
  margin-top: 54px;
}
.m-t-55 {
  margin-top: 55px;
}
.m-t-56 {
  margin-top: 56px;
}
.m-t-57 {
  margin-top: 57px;
}
.m-t-58 {
  margin-top: 58px;
}
.m-t-59 {
  margin-top: 59px;
}
.m-t-60 {
  margin-top: 60px;
}
.m-t-61 {
  margin-top: 61px;
}
.m-t-62 {
  margin-top: 62px;
}
.m-t-63 {
  margin-top: 63px;
}
.m-t-64 {
  margin-top: 64px;
}
.m-t-65 {
  margin-top: 65px;
}
.m-t-66 {
  margin-top: 66px;
}
.m-t-67 {
  margin-top: 67px;
}
.m-t-68 {
  margin-top: 68px;
}
.m-t-69 {
  margin-top: 69px;
}
.m-t-70 {
  margin-top: 70px;
}
.m-t-71 {
  margin-top: 71px;
}
.m-t-72 {
  margin-top: 72px;
}
.m-t-73 {
  margin-top: 73px;
}
.m-t-74 {
  margin-top: 74px;
}
.m-t-75 {
  margin-top: 75px;
}
.m-t-76 {
  margin-top: 76px;
}
.m-t-77 {
  margin-top: 77px;
}
.m-t-78 {
  margin-top: 78px;
}
.m-t-79 {
  margin-top: 79px;
}
.m-t-80 {
  margin-top: 80px;
}
.m-t-81 {
  margin-top: 81px;
}
.m-t-82 {
  margin-top: 82px;
}
.m-t-83 {
  margin-top: 83px;
}
.m-t-84 {
  margin-top: 84px;
}
.m-t-85 {
  margin-top: 85px;
}
.m-t-86 {
  margin-top: 86px;
}
.m-t-87 {
  margin-top: 87px;
}
.m-t-88 {
  margin-top: 88px;
}
.m-t-89 {
  margin-top: 89px;
}
.m-t-90 {
  margin-top: 90px;
}
.m-t-91 {
  margin-top: 91px;
}
.m-t-92 {
  margin-top: 92px;
}
.m-t-93 {
  margin-top: 93px;
}
.m-t-94 {
  margin-top: 94px;
}
.m-t-95 {
  margin-top: 95px;
}
.m-t-96 {
  margin-top: 96px;
}
.m-t-97 {
  margin-top: 97px;
}
.m-t-98 {
  margin-top: 98px;
}
.m-t-99 {
  margin-top: 99px;
}
.m-t-100 {
  margin-top: 100px;
}

.m-b-1 {
  margin-bottom: 1px;
}
.m-b-2 {
  margin-bottom: 2px;
}
.m-b-3 {
  margin-bottom: 3px;
}
.m-b-4 {
  margin-bottom: 4px;
}
.m-b-5 {
  margin-bottom: 5px;
}
.m-b-6 {
  margin-bottom: 6px;
}
.m-b-7 {
  margin-bottom: 7px;
}
.m-b-8 {
  margin-bottom: 8px;
}
.m-b-9 {
  margin-bottom: 9px;
}
.m-b-10 {
  margin-bottom: 10px;
}
.m-b-11 {
  margin-bottom: 11px;
}
.m-b-12 {
  margin-bottom: 12px;
}
.m-b-13 {
  margin-bottom: 13px;
}
.m-b-14 {
  margin-bottom: 14px;
}
.m-b-15 {
  margin-bottom: 15px;
}
.m-b-16 {
  margin-bottom: 16px;
}
.m-b-17 {
  margin-bottom: 17px;
}
.m-b-18 {
  margin-bottom: 18px;
}
.m-b-19 {
  margin-bottom: 19px;
}
.m-b-20 {
  margin-bottom: 20px;
}
.m-b-21 {
  margin-bottom: 21px;
}
.m-b-22 {
  margin-bottom: 22px;
}
.m-b-23 {
  margin-bottom: 23px;
}
.m-b-24 {
  margin-bottom: 24px;
}
.m-b-25 {
  margin-bottom: 25px;
}
.m-b-26 {
  margin-bottom: 26px;
}
.m-b-27 {
  margin-bottom: 27px;
}
.m-b-28 {
  margin-bottom: 28px;
}
.m-b-29 {
  margin-bottom: 29px;
}
.m-b-30 {
  margin-bottom: 30px;
}
.m-b-31 {
  margin-bottom: 31px;
}
.m-b-32 {
  margin-bottom: 32px;
}
.m-b-33 {
  margin-bottom: 33px;
}
.m-b-34 {
  margin-bottom: 34px;
}
.m-b-35 {
  margin-bottom: 35px;
}
.m-b-36 {
  margin-bottom: 36px;
}
.m-b-37 {
  margin-bottom: 37px;
}
.m-b-38 {
  margin-bottom: 38px;
}
.m-b-39 {
  margin-bottom: 39px;
}
.m-b-40 {
  margin-bottom: 40px;
}
.m-b-41 {
  margin-bottom: 41px;
}
.m-b-42 {
  margin-bottom: 42px;
}
.m-b-43 {
  margin-bottom: 43px;
}
.m-b-44 {
  margin-bottom: 44px;
}
.m-b-45 {
  margin-bottom: 45px;
}
.m-b-46 {
  margin-bottom: 46px;
}
.m-b-47 {
  margin-bottom: 47px;
}
.m-b-48 {
  margin-bottom: 48px;
}
.m-b-49 {
  margin-bottom: 49px;
}
.m-b-50 {
  margin-bottom: 50px;
}
.m-b-51 {
  margin-bottom: 51px;
}
.m-b-52 {
  margin-bottom: 52px;
}
.m-b-53 {
  margin-bottom: 53px;
}
.m-b-54 {
  margin-bottom: 54px;
}
.m-b-55 {
  margin-bottom: 55px;
}
.m-b-56 {
  margin-bottom: 56px;
}
.m-b-57 {
  margin-bottom: 57px;
}
.m-b-58 {
  margin-bottom: 58px;
}
.m-b-59 {
  margin-bottom: 59px;
}
.m-b-60 {
  margin-bottom: 60px;
}
.m-b-61 {
  margin-bottom: 61px;
}
.m-b-62 {
  margin-bottom: 62px;
}
.m-b-63 {
  margin-bottom: 63px;
}
.m-b-64 {
  margin-bottom: 64px;
}
.m-b-65 {
  margin-bottom: 65px;
}
.m-b-66 {
  margin-bottom: 66px;
}
.m-b-67 {
  margin-bottom: 67px;
}
.m-b-68 {
  margin-bottom: 68px;
}
.m-b-69 {
  margin-bottom: 69px;
}
.m-b-70 {
  margin-bottom: 70px;
}
.m-b-71 {
  margin-bottom: 71px;
}
.m-b-72 {
  margin-bottom: 72px;
}
.m-b-73 {
  margin-bottom: 73px;
}
.m-b-74 {
  margin-bottom: 74px;
}
.m-b-75 {
  margin-bottom: 75px;
}
.m-b-76 {
  margin-bottom: 76px;
}
.m-b-77 {
  margin-bottom: 77px;
}
.m-b-78 {
  margin-bottom: 78px;
}
.m-b-79 {
  margin-bottom: 79px;
}
.m-b-80 {
  margin-bottom: 80px;
}
.m-b-81 {
  margin-bottom: 81px;
}
.m-b-82 {
  margin-bottom: 82px;
}
.m-b-83 {
  margin-bottom: 83px;
}
.m-b-84 {
  margin-bottom: 84px;
}
.m-b-85 {
  margin-bottom: 85px;
}
.m-b-86 {
  margin-bottom: 86px;
}
.m-b-87 {
  margin-bottom: 87px;
}
.m-b-88 {
  margin-bottom: 88px;
}
.m-b-89 {
  margin-bottom: 89px;
}
.m-b-90 {
  margin-bottom: 90px;
}
.m-b-91 {
  margin-bottom: 91px;
}
.m-b-92 {
  margin-bottom: 92px;
}
.m-b-93 {
  margin-bottom: 93px;
}
.m-b-94 {
  margin-bottom: 94px;
}
.m-b-95 {
  margin-bottom: 95px;
}
.m-b-96 {
  margin-bottom: 96px;
}
.m-b-97 {
  margin-bottom: 97px;
}
.m-b-98 {
  margin-bottom: 98px;
}
.m-b-99 {
  margin-bottom: 99px;
}
.m-b-100 {
  margin-bottom: 100px;
}

/* #endregion ➤ [MAIN] [MARGINS] Website Layout */
/* #region ➤ [MAIN] [ANIMATIONS] Website Layout */
.hover\/transition\/v-1,
.hover-transition-v-1 {
  /* 🎨 style */
  transition: all 0.15s ease;
}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}
.animation-target {
  -moz-animation: flickerAnimation 1.5s infinite;
  -webkit-animation: flickerAnimation 1.5s infinite;
  -ms-animation: flickerAnimation 1.5s infinite;
  -o-animation: flickerAnimation 1.5s infinite;
  animation: flickerAnimation 1.5s infinite;
}

/* #endregion ➤ [MAIN] [ANIMATIONS] Website Layout */
/* #region ➤ [MAIN] [ROOT] Layout */
/*
### NOTE:
### Betarena Scores 'root:' values.
### SEE:
### https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
*/
:root {
  /*
  ╭──────────────────────────────────────────────────────────────────╮
  │ 📌 DIMENSIONS                                                    │
  ╰──────────────────────────────────────────────────────────────────╯
  */
  --app-height: 100%;
  /*
  ╭──────────────────────────────────────────────────────────────────╮
  │ 📌 COLORS                                                        │
  ╰──────────────────────────────────────────────────────────────────╯
  */
  --white: #ffffff;
  --whitev2: #f2f2f2;
  --white-3: #F7F7F7;
  --white-4: #D9D9D9;
  --primary: #f5620f;
  --primary-fade: #f77c42;
  --primary-fade-2: #D25E27;
  --secondary: #37474f;
  --blue: #0085ff;
  --red: #c62828;
  --red-bright: #ff3c3c;
  --red-bright-v2: #FF5F5F;
  --red-error: #ff0000;
  --green-success: #009406;
  --green-color: #59C65D;
  --green-1: #4DA025;
  --theme-color: #e3e3e3;
  --grey-color: #e6e6e6;
  --grey-shade: #cccccc;
  --grey-shade-2: #a8a8a8;
  --grey-shade-3: #C1C1C1;
  --grey-shade-4: #7E7E7E;
  --yellow-gold: #FFB904;
  --black: #000000;
  --dark: #121212;
  --grey: #8c8c8c;
  --background-surface: #121212;
  --dark-theme: #292929;
  --dark-theme-1: #4b4b4b;
  --dark-theme-1-shade: #616161;
  --dark-theme-1-2-shade: #737373;
  --dark-theme-1-3-shade: #999999;
  --dark-theme-1-4-shade: #383838;
  --dark-theme-1-7-shade: #313131;
  --dark-theme-1-5-shade: #161616;
  --dark-theme-1-6-shade: #4D4D4D;
  --dark-theme-1-5-shade-o-0-2: rgba(22, 22, 22, 0.2);
  --dark-theme-1-5-shade-o-0-5: rgba(75, 75, 75, 0.5);
  /*
  ╭──────────────────────────────────────────────────────────────────╮
  │ 📌 COMMON BREAKPOINTS                                            │
  ╰──────────────────────────────────────────────────────────────────╯
  */
  --mobile: 375;
  --tablet: 767;
  --desktop: 1440;
  /*
  ╭──────────────────────────────────────────────────────────────────╮
  │ 📌 MISC.                                                         │
  ╰──────────────────────────────────────────────────────────────────╯
  */
  --oragne-pale-bg: rgba(247, 124, 66, 0.2);
  --header-is-mobile: false;
}

/* #endregion ➤ [MAIN] [ROOT] Layout */
/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 FONT WEIGHT                                                                   │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/
.w-400 {
  font-weight: 400;
}

.w-500 {
  font-weight: 500;
}

.w-600 {
  font-weight: 600;
}

.w-700 {
  font-weight: 700;
}

.w-normal {
  font-weight: "normal";
}

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 FONT SIZE                                                                     │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/
.s-1,
.global.s-1,
.global.s-1 > * {
  font-size: 1px;
}

.s-2,
.global.s-2,
.global.s-2 > * {
  font-size: 2px;
}

.s-3,
.global.s-3,
.global.s-3 > * {
  font-size: 3px;
}

.s-4,
.global.s-4,
.global.s-4 > * {
  font-size: 4px;
}

.s-5,
.global.s-5,
.global.s-5 > * {
  font-size: 5px;
}

.s-6,
.global.s-6,
.global.s-6 > * {
  font-size: 6px;
}

.s-7,
.global.s-7,
.global.s-7 > * {
  font-size: 7px;
}

.s-8,
.global.s-8,
.global.s-8 > * {
  font-size: 8px;
}

.s-9,
.global.s-9,
.global.s-9 > * {
  font-size: 9px;
}

.s-10,
.global.s-10,
.global.s-10 > * {
  font-size: 10px;
}

.s-11,
.global.s-11,
.global.s-11 > * {
  font-size: 11px;
}

.s-12,
.global.s-12,
.global.s-12 > * {
  font-size: 12px;
}

.s-13,
.global.s-13,
.global.s-13 > * {
  font-size: 13px;
}

.s-14,
.global.s-14,
.global.s-14 > * {
  font-size: 14px;
}

.s-15,
.global.s-15,
.global.s-15 > * {
  font-size: 15px;
}

.s-16,
.global.s-16,
.global.s-16 > * {
  font-size: 16px;
}

.s-17,
.global.s-17,
.global.s-17 > * {
  font-size: 17px;
}

.s-18,
.global.s-18,
.global.s-18 > * {
  font-size: 18px;
}

.s-19,
.global.s-19,
.global.s-19 > * {
  font-size: 19px;
}

.s-20,
.global.s-20,
.global.s-20 > * {
  font-size: 20px;
}

.s-21,
.global.s-21,
.global.s-21 > * {
  font-size: 21px;
}

.s-22,
.global.s-22,
.global.s-22 > * {
  font-size: 22px;
}

.s-23,
.global.s-23,
.global.s-23 > * {
  font-size: 23px;
}

.s-24,
.global.s-24,
.global.s-24 > * {
  font-size: 24px;
}

.s-25,
.global.s-25,
.global.s-25 > * {
  font-size: 25px;
}

.s-26,
.global.s-26,
.global.s-26 > * {
  font-size: 26px;
}

.s-27,
.global.s-27,
.global.s-27 > * {
  font-size: 27px;
}

.s-28,
.global.s-28,
.global.s-28 > * {
  font-size: 28px;
}

.s-29,
.global.s-29,
.global.s-29 > * {
  font-size: 29px;
}

.s-30,
.global.s-30,
.global.s-30 > * {
  font-size: 30px;
}

.s-31,
.global.s-31,
.global.s-31 > * {
  font-size: 31px;
}

.s-32,
.global.s-32,
.global.s-32 > * {
  font-size: 32px;
}

.s-33,
.global.s-33,
.global.s-33 > * {
  font-size: 33px;
}

.s-34,
.global.s-34,
.global.s-34 > * {
  font-size: 34px;
}

.s-35,
.global.s-35,
.global.s-35 > * {
  font-size: 35px;
}

.s-36,
.global.s-36,
.global.s-36 > * {
  font-size: 36px;
}

.s-37,
.global.s-37,
.global.s-37 > * {
  font-size: 37px;
}

.s-38,
.global.s-38,
.global.s-38 > * {
  font-size: 38px;
}

.s-39,
.global.s-39,
.global.s-39 > * {
  font-size: 39px;
}

.s-40,
.global.s-40,
.global.s-40 > * {
  font-size: 40px;
}

.s-41,
.global.s-41,
.global.s-41 > * {
  font-size: 41px;
}

.s-42,
.global.s-42,
.global.s-42 > * {
  font-size: 42px;
}

.s-43,
.global.s-43,
.global.s-43 > * {
  font-size: 43px;
}

.s-44,
.global.s-44,
.global.s-44 > * {
  font-size: 44px;
}

.s-45,
.global.s-45,
.global.s-45 > * {
  font-size: 45px;
}

.s-46,
.global.s-46,
.global.s-46 > * {
  font-size: 46px;
}

.s-47,
.global.s-47,
.global.s-47 > * {
  font-size: 47px;
}

.s-48,
.global.s-48,
.global.s-48 > * {
  font-size: 48px;
}

.s-49,
.global.s-49,
.global.s-49 > * {
  font-size: 49px;
}

.s-50,
.global.s-50,
.global.s-50 > * {
  font-size: 50px;
}

.s-51,
.global.s-51,
.global.s-51 > * {
  font-size: 51px;
}

.s-52,
.global.s-52,
.global.s-52 > * {
  font-size: 52px;
}

.s-53,
.global.s-53,
.global.s-53 > * {
  font-size: 53px;
}

.s-54,
.global.s-54,
.global.s-54 > * {
  font-size: 54px;
}

.s-55,
.global.s-55,
.global.s-55 > * {
  font-size: 55px;
}

.s-56,
.global.s-56,
.global.s-56 > * {
  font-size: 56px;
}

.s-57,
.global.s-57,
.global.s-57 > * {
  font-size: 57px;
}

.s-58,
.global.s-58,
.global.s-58 > * {
  font-size: 58px;
}

.s-59,
.global.s-59,
.global.s-59 > * {
  font-size: 59px;
}

.s-60,
.global.s-60,
.global.s-60 > * {
  font-size: 60px;
}

.s-61,
.global.s-61,
.global.s-61 > * {
  font-size: 61px;
}

.s-62,
.global.s-62,
.global.s-62 > * {
  font-size: 62px;
}

.s-63,
.global.s-63,
.global.s-63 > * {
  font-size: 63px;
}

.s-64,
.global.s-64,
.global.s-64 > * {
  font-size: 64px;
}

.s-65,
.global.s-65,
.global.s-65 > * {
  font-size: 65px;
}

.s-66,
.global.s-66,
.global.s-66 > * {
  font-size: 66px;
}

.s-67,
.global.s-67,
.global.s-67 > * {
  font-size: 67px;
}

.s-68,
.global.s-68,
.global.s-68 > * {
  font-size: 68px;
}

.s-69,
.global.s-69,
.global.s-69 > * {
  font-size: 69px;
}

.s-70,
.global.s-70,
.global.s-70 > * {
  font-size: 70px;
}

.s-71,
.global.s-71,
.global.s-71 > * {
  font-size: 71px;
}

.s-72,
.global.s-72,
.global.s-72 > * {
  font-size: 72px;
}

.s-73,
.global.s-73,
.global.s-73 > * {
  font-size: 73px;
}

.s-74,
.global.s-74,
.global.s-74 > * {
  font-size: 74px;
}

.s-75,
.global.s-75,
.global.s-75 > * {
  font-size: 75px;
}

.s-76,
.global.s-76,
.global.s-76 > * {
  font-size: 76px;
}

.s-77,
.global.s-77,
.global.s-77 > * {
  font-size: 77px;
}

.s-78,
.global.s-78,
.global.s-78 > * {
  font-size: 78px;
}

.s-79,
.global.s-79,
.global.s-79 > * {
  font-size: 79px;
}

.s-80,
.global.s-80,
.global.s-80 > * {
  font-size: 80px;
}

.s-81,
.global.s-81,
.global.s-81 > * {
  font-size: 81px;
}

.s-82,
.global.s-82,
.global.s-82 > * {
  font-size: 82px;
}

.s-83,
.global.s-83,
.global.s-83 > * {
  font-size: 83px;
}

.s-84,
.global.s-84,
.global.s-84 > * {
  font-size: 84px;
}

.s-85,
.global.s-85,
.global.s-85 > * {
  font-size: 85px;
}

.s-86,
.global.s-86,
.global.s-86 > * {
  font-size: 86px;
}

.s-87,
.global.s-87,
.global.s-87 > * {
  font-size: 87px;
}

.s-88,
.global.s-88,
.global.s-88 > * {
  font-size: 88px;
}

.s-89,
.global.s-89,
.global.s-89 > * {
  font-size: 89px;
}

.s-90,
.global.s-90,
.global.s-90 > * {
  font-size: 90px;
}

.s-91,
.global.s-91,
.global.s-91 > * {
  font-size: 91px;
}

.s-92,
.global.s-92,
.global.s-92 > * {
  font-size: 92px;
}

.s-93,
.global.s-93,
.global.s-93 > * {
  font-size: 93px;
}

.s-94,
.global.s-94,
.global.s-94 > * {
  font-size: 94px;
}

.s-95,
.global.s-95,
.global.s-95 > * {
  font-size: 95px;
}

.s-96,
.global.s-96,
.global.s-96 > * {
  font-size: 96px;
}

.s-97,
.global.s-97,
.global.s-97 > * {
  font-size: 97px;
}

.s-98,
.global.s-98,
.global.s-98 > * {
  font-size: 98px;
}

.s-99,
.global.s-99,
.global.s-99 > * {
  font-size: 99px;
}

.s-100,
.global.s-100,
.global.s-100 > * {
  font-size: 100px;
}

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 LEGACY                                                                        │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/
.global.color-grey > * {
  color: var(--grey) !important;
}

.x-large,
p.x-large,
span.x-large {
  font-size: 18px;
}

.large,
p.large,
span.large {
  font-size: 16px;
}

.medium,
p.medium,
span.medium {
  font-size: 14px;
}

.small,
p.small {
  font-size: 12px;
}

.s_small,
p.s_small {
  font-size: 12px;
}

@media only screen and (min-width: 768px) {
  .s-t-16 {
    font-size: 16px;
  }
  .large,
  p.large,
  span.large {
    font-size: 18px;
  }
}
/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 HEADINGS                                                                      │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/
h1 {
  /* 🎨 style */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  font-weight: 700;
  line-height: 140%;
  font-size: 32px;
}

h2 {
  /* 🎨 style */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  font-weight: 700;
  line-height: 140%;
  font-size: 20px;
}

h3 {
  /* 🎨 style */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  font-weight: 700;
  line-height: 140%;
  font-size: 18px;
}

h4 {
  /* 🎨 style */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  font-weight: 700;
  line-height: 140%;
  font-size: 14px;
}

h5 {
  /* 🎨 style */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  font-weight: 700;
  line-height: 140%;
}

h6 {
  /* 🎨 style */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  font-weight: 700;
  line-height: 140%;
}

.global.lh-125 > * {
  /* 🎨 style */
  line-height: 125%;
}

.global.lh-128 > * {
  /* 🎨 style */
  line-height: 128.571%;
}

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 FONT COLORS                                                                   │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/
.color-white {
  /* 🎨 style */
  color: var(--white) !important;
}

.color-white-2 {
  /* 🎨 style */
  color: var(--whitev2) !important;
}

.color-white-3 {
  /* 🎨 style */
  color: var(--white-3) !important;
}
.dark-background .color-white-3.dark-v3, .dark-background-1 .color-white-3.dark-v3, .dark-mode .color-white-3.dark-v3 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--grey-shade) !important;
}

.color-white-4 {
  /* 🎨 style */
  color: var(--white-4) !important;
}

.color-primary {
  /* 🎨 style */
  color: var(--primary) !important;
}
.dark-background .color-primary, .dark-background-1 .color-primary, .dark-mode .color-primary {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--primary) !important;
}

.color-primary-fade {
  /* 🎨 style */
  color: var(--primary-fade) !important;
}

.color-primary-fade-2 {
  /* 🎨 style */
  color: var(--primary-fade-2) !important;
}
.dark-background .color-primary-fade-2.dark-v0, .dark-background-1 .color-primary-fade-2.dark-v0, .dark-mode .color-primary-fade-2.dark-v0 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--primary-fade-2) !important;
}

.color-secondary {
  /* 🎨 style */
  color: var(--secondary) !important;
}

.color-blue {
  /* 🎨 style */
  color: var(--blue) !important;
}

.color-red {
  /* 🎨 style */
  color: var(--red) !important;
}

.color-red-bright {
  /* 🎨 style */
  color: var(--red-bright) !important;
}

.color-red-bright-v2 {
  /* 🎨 style */
  color: var(--red-bright-v2) !important;
}

.color-error {
  /* 🎨 style */
  color: var(--red-error) !important;
}

.color-success {
  /* 🎨 style */
  color: var(--green-success) !important;
}

.color-green {
  /* 🎨 style */
  color: var(--green-color) !important;
}
.dark-background .color-green.dark-v0, .dark-background-1 .color-green.dark-v0, .dark-mode .color-green.dark-v0 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--green-color) !important;
}

.color-green-1 {
  /* 🎨 style */
  color: var(--green-1) !important;
}

.color-theme-color {
  /* 🎨 style */
  color: var(--theme-color) !important;
}

.color-grey-color {
  /* 🎨 style */
  color: var(--grey-color) !important;
}

.color-grey-shade {
  /* 🎨 style */
  color: var(--grey-shade) !important;
}
.dark-background .color-grey-shade.dark-v1, .dark-background-1 .color-grey-shade.dark-v1, .dark-mode .color-grey-shade.dark-v1 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--grey) !important;
}

.color-grey-shade-2 {
  /* 🎨 style */
  color: var(--grey-shade-2) !important;
}

.color-grey-shade-3 {
  /* 🎨 style */
  color: var(--grey-shade-3) !important;
}

.color-grey-v2 {
  /* 🎨 style */
  color: var(--grey-shade-4) !important;
}
.dark-background .color-grey-v2.grey-v1, .dark-background-1 .color-grey-v2.grey-v1, .dark-mode .color-grey-v2.grey-v1 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--grey-shade-3) !important;
}

.color-yellow {
  /* 🎨 style */
  color: var(--yellow-gold) !important;
}

.color-black {
  /* 🎨 style */
  color: var(--black) !important;
}

.color-dark {
  /* 🎨 style */
  color: var(--dark) !important;
}

.color-grey {
  /* 🎨 style */
  color: var(--grey) !important;
}
.dark-background .color-grey, .dark-background-1 .color-grey, .dark-mode .color-grey {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--grey-shade-2) !important;
}
.dark-background .color-grey.dark-white-v1, .dark-background-1 .color-grey.dark-white-v1, .dark-mode .color-grey.dark-white-v1 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--white) !important;
}
.dark-background .color-grey.dark-white-v3, .dark-background-1 .color-grey.dark-white-v3, .dark-mode .color-grey.dark-white-v3 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--white-3) !important;
}
.dark-background .color-grey.grey-v1, .dark-background-1 .color-grey.grey-v1, .dark-mode .color-grey.grey-v1 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--grey-shade) !important;
}
.dark-background .color-grey.dark-v1, .dark-background-1 .color-grey.dark-v1, .dark-mode .color-grey.dark-v1 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--grey) !important;
}

.color-background-surface {
  /* 🎨 style */
  color: var(--background-surface) !important;
}

.color-black-2 {
  /* 🎨 style */
  color: var(--dark-theme) !important;
}
.dark-background .color-black-2, .dark-background-1 .color-black-2, .dark-mode .color-black-2 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--white) !important;
}
.dark-background .color-black-2.grey-v1, .dark-background-1 .color-black-2.grey-v1, .dark-mode .color-black-2.grey-v1 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--grey-shade) !important;
}
.dark-background .color-black-2.white-v1, .dark-background-1 .color-black-2.white-v1, .dark-mode .color-black-2.white-v1 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--grey-color) !important;
}

.color-black-3 {
  /* 🎨 style */
  color: var(--dark-theme-1) !important;
}
.dark-background .color-black-3, .dark-background-1 .color-black-3, .dark-mode .color-black-3 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--white) !important;
}
.dark-background .color-black-3.dark-v1, .dark-background-1 .color-black-3.dark-v1, .dark-mode .color-black-3.dark-v1 {
  /* 🔥 override */
  /* 🎨 style */
  color: var(--grey-shade) !important;
}

.color-dark-theme-1-shade {
  /* 🎨 style */
  color: var(--dark-theme-1-shade) !important;
}

.color-dark-theme-1-2-shade {
  /* 🎨 style */
  color: var(--dark-theme-1-2-shade) !important;
}

.color-dark-theme-1-3-shade {
  /* 🎨 style */
  color: var(--dark-theme-1-3-shade) !important;
}

.color-dark-theme-1-4-shade {
  /* 🎨 style */
  color: var(--dark-theme-1-4-shade) !important;
}

.color-dark-theme-1-7-shade {
  /* 🎨 style */
  color: var(--dark-theme-1-7-shade) !important;
}

.color-dark-theme-1-5-shade {
  /* 🎨 style */
  color: var(--dark-theme-1-5-shade) !important;
}

.color-dark-theme-1-6-shade {
  /* 🎨 style */
  color: var(--dark-theme-1-6-shade) !important;
}

.color-dark-theme-1-5-shade-o-0-2 {
  /* 🎨 style */
  color: var(--dark-theme-1-5-shade-o-0-2) !important;
}

.color-dark-theme-1-5-shade-o-0-5 {
  /* 🎨 style */
  color: var(--dark-theme-1-5-shade-o-0-5) !important;
}

.color-blue-green-gradient {
  /* 🎨 style */
  background: -webkit-linear-gradient rgb(0, 255, 117), rgb(0, 163, 255);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hover-color-primary:hover {
  /* 🎨 style */
  color: var(--primary) !important;
}

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 FONT EXTRA STYLES                                                             │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/
.no-wrap {
  white-space: nowrap;
}

.underline {
  text-decoration: underline !important;
}

.bold {
  font-style: normal;
  font-weight: bold;
}

.not-bold {
  font-weight: normal;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.text-center {
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
}

.text-left {
  text-align: left;
  text-align: -webkit-left;
  text-align: -moz-left;
}

.text-right {
  text-align: right;
  text-align: -webkit-right;
  text-align: -moz-right;
}

.place-center {
  place-self: center;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.display-none {
  display: none !important;
}

.display-unset {
  display: unset !important;
}

.visibility-none {
  visibility: hidden;
}

.opacity-0-4 {
  opacity: 0.4;
}

/* #region ➤ [MAIN] [BUTTONS] Website Layout */
/*
╭──────────────────────────────────────────────────────────────────╮
│ 📌 BUTTON STYLES                                                 │
╰──────────────────────────────────────────────────────────────────╯
*/
button {
  /* 🎨 style */
  outline: none !important;
  border: none !important;
  opacity: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  align-items: center;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  /*
  ╭──────────────────────────────────────────────────────────────────╮
  │ 📌 EXTRA BUTTON STYLES                                           │
  ╰──────────────────────────────────────────────────────────────────╯
  */
}
button:disabled {
  cursor: default;
}
button.btn-primary {
  /* 🎨 style */
  background: var(--primary);
}
button.btn-primary p {
  /* 🎨 style */
  color: var(--white);
}
button.btn-secondary {
  /* 🎨 style */
  background: var(--secondary);
}
button.btn-secondary p {
  /* 🎨 style */
  color: var(--white);
}
button.btn-blue {
  /* 🎨 style */
  background-color: var(--blue);
}
button.btn-blue p {
  /* 🎨 style */
  color: var(--white);
}
button.btn-blue:hover {
  /* 🎨 style */
  background-color: var(--white);
}
button.btn-blue:hover p {
  /* 🎨 style */
  color: var(--secondary);
}
button.btn-white {
  /* 🎨 style */
  background-color: var(--white);
}
button.btn-white p {
  /* 🎨 style */
  color: var(--black);
}
button.btn-primary-v2 {
  /* 🎨 style */
  height: 44px;
  padding: 11.5px 24px;
  background: var(--primary);
  border-radius: 8px;
  color: var(--white);
}
button.btn-primary-v2:hover {
  /* 🎨 style */
  background-color: var(--primary-fade);
}
button.btn-hollow {
  /* 🎨 style */
  height: 44px;
  padding: 11.5px 20px;
  background: transparent;
  border: 1px solid var(--grey-color) !important;
  border-radius: 8px;
  color: var(--dark-theme);
  /*
  Variant (2)
  */
  /*
  Variant (3)
  */
  /*
  Variant (4)
  */
  /*
  Variant (6)
  */
}
button.btn-hollow:hover {
  /* 🎨 style */
  border: 1px solid var(--primary) !important;
  color: var(--primary);
}
button.btn-hollow.danger {
  /* 🎨 style */
  border: 1px solid var(--red) !important;
}
button.btn-hollow.cta {
  /* 🎨 style */
  border: 1px solid var(--primary) !important;
}
button.btn-hollow.cta:hover {
  /* 🎨 style */
  background-color: var(--primary);
  color: var(--white) !important;
}
button.btn-hollow.v4:hover {
  /* 🎨 style */
  border: 1px solid var(--grey-shade) !important;
  color: initial;
}
button.btn-hollow.v6 {
  /* 🎨 style */
  background: #292929;
  height: 44px;
  padding: 12px 24px 11px 24px;
  border-radius: 8px;
  border: 1px;
  gap: 10px;
}
.dark-background button.btn-hollow.v6, .dark-background-1 button.btn-hollow.v6, .dark-mode button.btn-hollow.v6 {
  /* 🎨 style */
  border: 1px solid #FFFFFF;
}
.dark-background button.btn-hollow.v2, .dark-background-1 button.btn-hollow.v2, .dark-mode button.btn-hollow.v2 {
  /* 🎨 style */
  border: 1px solid var(--dark-theme-1) !important;
}
.dark-background button.btn-hollow.v3d, .dark-background-1 button.btn-hollow.v3d, .dark-mode button.btn-hollow.v3d {
  /* 🎨 style */
  border: 1px solid var(--grey) !important;
}
.dark-background button.btn-hollow.v3d:hover, .dark-background-1 button.btn-hollow.v3d:hover, .dark-mode button.btn-hollow.v3d:hover {
  /* 🎨 style */
  border: 1px solid var(--grey-shade) !important;
}
.dark-background button.btn-hollow.v5d, .dark-background-1 button.btn-hollow.v5d, .dark-mode button.btn-hollow.v5d {
  /* 🎨 style */
  border: 1px solid var(--dark-theme-1-shade) !important;
}
button.btn-dark {
  /* 🎨 style */
  padding: 10px 17px;
  border-radius: 12px;
  background-color: var(--grey-color);
}
button.btn-dark:hover {
  /* 🎨 style */
  background-color: var(--white-3);
}
.dark-background button.btn-dark, .dark-background-1 button.btn-dark, .dark-mode button.btn-dark {
  /* 🎨 style */
  background-color: var(--dark-theme-1-4-shade);
}
.dark-background button.btn-dark:hover, .dark-background-1 button.btn-dark:hover, .dark-mode button.btn-dark:hover {
  /* 🎨 style */
  background-color: var(--dark-theme);
}
button.btn-right-icon {
  /* 🎨 style */
  padding: 5px 45px 5px 6px !important;
  background-position: right 11px top 50%;
  background-size: 16.17px 16.17px;
  background-repeat: no-repeat;
}
button.btn-left-icon {
  /* 🎨 style */
  padding: 5px 6px 5px 37px !important;
  background-position: left 11px top 50%;
  background-size: 16.17px 16.17px;
  background-repeat: no-repeat;
}
button.btn-shadow-1 {
  /* 🎨 style */
  box-shadow: 0px 3px 8px 0px rgba(212, 84, 12, 0.32);
}

/* #endregion ➤ [MAIN] [BUTTONS] Website Layout */
/* #region ➤ [MAIN] [CONTAINERS] Website Layout */
.widget-component {
  display: grid;
  background: #ffffff;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  width: 100%;
  padding: 20px 0;
  overflow: hidden;
}
.dark-background .widget-component, .dark-mode .widget-component {
  /* 🎨 style */
  background-color: var(--dark-theme-1) !important;
}

.container {
  display: block;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 1px;
  width: 1px;
}
.container input:checked ~ .checkmark {
  background-color: var(--primary);
  border: 1.5px solid transparent;
}

section {
  min-height: calc(100vh - 128px);
  padding: 22px 16px;
  padding-bottom: 100px !important;
  margin: auto;
}
@media only screen and (min-width: 768px) {
  section {
    padding: 26px 34px;
    margin: auto;
  }
}
@media only screen and (min-width: 1025px) {
  section {
    padding: 26px 34px;
    margin: auto;
  }
}

.flex-start {
  align-items: flex-start !important;
}

.row-space-out {
  /* 🎨 style */
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.row-space-even {
  /* 🎨 style */
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}
.row-space-start {
  /* 🎨 style */
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
}
.row-space-out-top {
  /* 🎨 style */
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
}
.row-space-center {
  /* 🎨 style */
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.row-space-end {
  /* 🎨 style */
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: end;
}

.column-space-center {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
}
.column-space-start {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
}
.column-space-stretch {
  display: flex;
  align-content: center;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
}
.column-start-grid {
  display: grid;
  justify-content: center;
}
.column-start-grid-start {
  display: grid;
  width: 100%;
  justify-items: start;
}

/* #endregion ➤ [MAIN] [CONTAINERS] Website Layout */
hr {
  /* 🎨 style */
  width: 100%;
  margin: 16.17px 0;
  opacity: 0.25;
  border: 1.46983px solid #ff5555;
  background-color: #ff5555;
}

form fieldset {
  /* 🎨 style */
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
}
form input, form select {
  /* 🎨 style */
  outline: none;
  border: none;
  opacity: 1;
  cursor: text;
  align-items: center;
  text-align: start;
  display: flex;
  transition: all 0.15s ease;
  /* background: #ffffff; */
  /* border: 0.5px solid #37474f; */
  box-sizing: border-box;
  border-radius: 7.34914px;
  padding: 7px;
  background-color: transparent;
  border: 1px solid var(--gray-day, #CCC);
}
form input {
  /* 🎨 style */
  height: 44px;
  width: -webkit-fill-available;
  width: -moz-available;
  border: 1px solid var(--grey-shade);
  box-sizing: border-box;
  border-radius: 8px;
  padding: 20px 12px;
  outline: none;
  font-size: 14px;
  background-color: transparent;
}
form input:hover {
  /* 🎨 style */
  border: 1px solid var(--grey);
}
form input:focus {
  /* 🎨 style */
  border: 1px solid var(--dark-theme-1);
}
form input[placeholder] {
  /* 🎨 style */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
form input.v-1 {
  /* 🎨 style */
  width: 20px;
  height: 20px;
  border: 1px solid #CCCCCC;
  accent-color: var(--primary);
}
.dark-background-1 form input, .dark-mode form input {
  border: 1px solid var(--dark-theme-1-2-shade);
}
.dark-background-1 form input:hover, .dark-mode form input:hover {
  /* 🎨 style */
  border: 1px solid var(--dark-theme-1-3-shade);
}
.dark-background-1 form input:focus, .dark-mode form input:focus {
  /* 🎨 style */
  border: 1px solid var(--dark-theme-1-3-shade);
}

.width-auto {
  width: auto;
}

.width-fit-content {
  width: fit-content;
}

.width-100 {
  width: 100%;
}

img.google-aspect-ratio {
  /* 🎨 style */
  /* width: auto; */
  /* max-height: 100%; */
  object-fit: contain;
}

.checkmark {
  position: absolute;
  top: -10px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 1.5px solid #A9B8AE;
  border-radius: 3.25px;
}

/*
╭──────────────────────────────────────────────────────────────────╮
│ 📌 POSITIONS                                                     │
╰──────────────────────────────────────────────────────────────────╯
*/
.box-center {
  /* 📌 position */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.mutated {
  /* 🎨 style */
  border: 1px solid #F00;
}

/*
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
◼️ DARK-THEME :: GENERAL                                                                ◼️
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
*/
.dark-background {
  /* 🎨 style */
  background-color: var(--dark-theme) !important;
}

.dark-background-1 {
  /* 🎨 style */
  background-color: var(--dark-theme-1) !important;
}

/*
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
◼️ DARK-THEME :: OTHER                                                                  ◼️
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
*/
.dark-background .hover-color-primary:hover,
.dark-background-1 .hover-color-primary:hover,
.dark-mode .hover-color-primary:hover {
  /* 🎨 style */
  color: var(--primary) !important;
}

body {
  --radius-none: 0px;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 9999px;
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-10xl: 128px;
  --spacing-11xl: 160px;
  --width-xxs: 320px;
  --width-sm: 480px;
  --width-lg: 640px;
  --width-xl: 768px;
  --width-2xl: 1024px;
  --width-3xl: 1280px;
  --width-4xl: 1440px;
  --width-5xl: 1600px;
  --width-6xl: 1920px;
  --width-md: 560px;
  --paragraph-max-width: 720px;
  --width-xs: 384px;
  --container-max-width-desktop: 1280px;
  --container-padding-desktop: 32px;
  --container-padding-mobile: 16px;
  --spacing-0--0px-: 0px;
  --spacing-0-5--2px-: 2px;
  --spacing-1--4px-: 4px;
  --spacing-2--8px-: 8px;
  --spacing-3--12px-: 12px;
  --spacing-4--16px-: 16px;
  --spacing-5--20px-: 20px;
  --spacing-6--24px-: 24px;
  --spacing-8--32px-: 32px;
  --spacing-10--40px-: 40px;
  --spacing-12--48px-: 48px;
  --spacing-16--64px-: 64px;
  --spacing-20--80px-: 80px;
  --spacing-24--96px-: 96px;
  --spacing-32--128px-: 128px;
  --spacing-40--160px-: 160px;
  --spacing-48--192px-: 192px;
  --spacing-56--224px-: 224px;
  --spacing-64--256px-: 256px;
  --spacing-96--384px-: 384px;
  --spacing-80--320px-: 320px;
  --spacing-120--480px-: 480px;
  --spacing-160--640px-: 640px;
  --spacing-192--768px-: 768px;
  --spacing-256--1-024px-: 1024px;
  --spacing-320--1-280px-: 1280px;
  --spacing-360--1-440px-: 1440px;
  --spacing-400--1-600px-: 1600px;
  --spacing-480--1-920px-: 1920px;
  --spacing-1-5--6px-: 6px;
  --spacing-140--560px-: 560px;
  --spacing-180--720px-: 720px;
  --Font-family-font-family-display: Roboto;
  --Font-size-display-xs: 24px;
  --Font-size-text-sm: 14px;
  --Font-size-text-md: 16px;
  --Line-height-text-sm: 20px;
  --Line-height-display-xs: 32px;
  --Line-height-text-md: 24px;
  --white: #FFFFFF;
  --colors-gray-light-mode-900: #313131;
  --Background-bg-brand-primary: #FEEFE7;
  --colors-brand-brand-5: #F5620F;
  --colors-brand-4: #F77D38;
  --Text-Text-white: #fff;
  --Background-bg-error-solid: #FF3C3C;
  /* Shadows/shadow-xl */
  --box-shadow: 0px 20px 24px -4px rgba(41, 41, 41, 0.08),
    0px 0px 8px 0px rgba(41, 41, 41, 0.08);
  --colors-gray-gray-1: #F7F7F7;
  --colors-gray-gray-2: #D2D2D2;
  --colors-gray-gray-3: #9D9D9D;
  --colors-gray-gray-4: #727171;
  --colors-gray-gray-5: #525252;
  --colors-gray-gray-6: #3C3C3C;
  --colors-gray-gray-7: #292929;
  --colors-brand-brand-1: #FEEFE7;
  --colors-brand-brand-2: #FBBF9D;
  --colors-brand-brand-3: #F9A474;
  --colors-brand-brand-4: #F77D38;
  --colors-brand-brand-5: #F5620F;
  --colors-brand-brand-6: #AC450B;
  --colors-brand-brand-7: #953C09;
  --colors-warning-warning-1: #FDF4E6;
  --colors-warning-warning-2: #F5D398;
  --colors-warning-warning-3: #F1C16D;
  --colors-warning-warning-4: #EBA62F;
  --colors-warning-warning-5: #E79404;
  --colors-warning-warning-6: #A26803;
  --colors-warning-warning-7: #8D5A02;
  --colors-error-error-1: #FFECEC;
  --colors-error-error-2: #FFAFAF;
  --colors-error-error-3: #FF8E8E;
  --colors-error-error-4: #FF5D5D;
  --colors-error-error-5: #FF3C3C;
  --colors-error-error-6: #B32A2A;
  --colors-error-error-7: #9C2525;
  --colors-success-success-1: #EDF9ED;
  --colors-success-success-2: #B5E5B6;
  --colors-success-success-3: #96DA97;
  --colors-success-success-4: #69CA6A;
  --colors-success-success-5: #4ABF4C;
  --colors-success-success-6: #348635;
  --colors-success-success-7: #2D752E;
  --shadows-shadow-xs: 0px 1px 2px 0px rgba(41, 41, 41, 0);
  --shadows-shadow-sm: 0px 1px 2px 0px rgba(41, 41, 41, 0), 0px 1px 3px 0px rgba(41, 41, 41, 0);
  --shadows-shadow-md: 0px 2px 4px -2px rgba(41, 41, 41, 0), 0px 4px 8px -2px rgba(41, 41, 41, 0);
  --shadows-shadow-lg: 0px 4px 6px -2px rgba(41, 41, 41, 0), 0px 12px 16px -4px rgba(41, 41, 41, 0);
  --shadows-shadow-xl: 0px 0px 8px 0px rgba(41, 41, 41, 0), 0px 20px 24px -4px rgba(41, 41, 41, 0);
  --shadows-shadow-2xl: 0px 24px 48px -12px rgba(41, 41, 41, 0);
  --shadows-shadow-3xl: 0px 32px 64px -12px rgba(41, 41, 41, 0);
  --shadows-shadow-brand-md: 0px 3px 8px 0px rgba(245, 98, 15, 0);
  --shadows-shadow-success-md: 0px 3px 8px 0px rgba(74, 191, 76, 0);
  --focus-rings-ring-brand-2px: 0px 0px 0px 2px #F9A474;
  --focus-rings-ring-brand-4px: 0px 0px 0px 4px rgba(245, 98, 15, 0);
  --focus-rings-ring-gray-4px: 0px 0px 0px 4px rgba(41, 41, 41, 0);
  --focus-rings-ring-success-4px: 0px 0px 0px 4px rgba(74, 191, 76, 0);
  --focus-rings-ring-error-4px: 0px 0px 0px 4px rgba(255, 60, 60, 0);
  --text-xs-regular: 12px;
  --text-xs-medium: 12px;
  --text-xs-semibold: 12px;
  --text-xs-bold: 12px;
  --text-sm-regular: 14px;
  --text-sm-medium: 14px;
  --text-sm-semibold: 14px;
  --text-sm-bold: 14px;
  --text-md-regular: 16px;
  --text-md-medium: 16px;
  --text-md-semibold: 16px;
  --text-md-bold: 16px;
  --text-lg-regular: 18px;
  --text-lg-medium: 18px;
  --text-lg-semibold: 18px;
  --text-lg-bold: 18px;
  --text-xl-regular: 20px;
  --text-xl-medium: 20px;
  --text-xl-semibold: 20px;
  --text-xl-bold: 20px;
  --display-xs-regular: 24px;
  --display-xs-medium: 24px;
  --display-xs-semibold: 24px;
  --display-xs-bold: 24px;
  --display-sm-regular: 30px;
  --display-sm-medium: 30px;
  --display-sm-semibold: 30px;
  --display-sm-bold: 30px;
  --display-md-regular: 36px;
  --display-md-medium: 36px;
  --display-md-semibold: 36px;
  --display-md-bold: 36px;
  --display-lg-regular: 48px;
  --display-lg-medium: 48px;
  --display-lg-semibold: 48px;
  --display-lg-bold: 48px;
  --display-xl-regular: 60px;
  --display-xl-medium: 60px;
  --display-xl-semibold: 60px;
  --display-xl-bold: 60px;
  --display-2xl-regular: 72px;
  --display-2xl-medium: 72px;
  --display-2xl-semibold: 72px;
  --display-2xl-bold: 72px;
}

:root {
  /* _PRIMITIVES */
  --colors-gray-1: #f7f7f7;
  --colors-gray-2: #e6e6e6;
  --colors-gray-3: #cccccc;
  --colors-gray-4: #8c8c8c;
  --colors-gray-5: #4b4b4b;
  --colors-gray-6: #313131;
  --colors-gray-7: #292929;
  --colors-brand-1: #feefe7;
  --colors-brand-2: #ffd6be;
  --colors-brand-3: #f9a474;
  --colors-brand-4: #f77d38;
  --colors-brand-5: #f5620f;
  --colors-brand-6: #ac450b;
  --colors-brand-7: #953c09;
  --colors-base-white: #ffffff;
  --colors-base-black: #000000;
  --colors-error-1: #ffecec;
  --colors-error-2: #ffafaf;
  --colors-error-3: #ff8e8e;
  --colors-error-4: #ff5d5d;
  --colors-error-5: #ff3c3c;
  --colors-error-6: #b32a2a;
  --colors-error-7: #9c2525;
  --colors-success-1: #edf9ed;
  --colors-success-2: #b5e5b6;
  --colors-success-3: #96da97;
  --colors-success-4: #69ca6a;
  --colors-success-5: #4abf4c;
  --colors-success-6: #348635;
  --colors-success-7: #2d752e;
  --colors-warning-1: #fdf4e6;
  --colors-warning-2: #f5d398;
  --colors-warning-3: #f1c16d;
  --colors-warning-4: #eba62f;
  --colors-warning-5: #e79404;
  --colors-warning-6: #a26803;
  --colors-warning-7: #8d5a02;
  /* 3. SPACING */
  --spacing-none: 0px;
  --spacing-none-rem: 0rem;
  --spacing-xxs: 2px;
  --spacing-xxs-rem: 0.125rem;
  --spacing-xs: 4px;
  --spacing-xs-rem: 0.25rem;
  --spacing-md: 8px;
  --spacing-md-rem: 0.5rem;
  --spacing-lg: 12px;
  --spacing-lg-rem: 0.75rem;
  --spacing-xl: 16px;
  --spacing-xl-rem: 1rem;
  --spacing-2xl: 20px;
  --spacing-2xl-rem: 1.25rem;
  --spacing-3xl: 24px;
  --spacing-3xl-rem: 1.5rem;
  --spacing-4xl: 32px;
  --spacing-4xl-rem: 2rem;
  --spacing-6xl: 48px;
  --spacing-6xl-rem: 3rem;
  --spacing-7xl: 64px;
  --spacing-7xl-rem: 4rem;
  --spacing-8xl: 80px;
  --spacing-8xl-rem: 5rem;
  --spacing-9xl: 96px;
  --spacing-9xl-rem: 6rem;
  --spacing-10xl: 128px;
  --spacing-10xl-rem: 8rem;
  --spacing-11xl: 160px;
  --spacing-11xl-rem: 10rem;
  --spacing-sm: 6px;
  --spacing-sm-rem: 0.375rem;
  --spacing-5xl: 40px;
  --spacing-5xl-rem: 2.5rem;
  /* 4. WIDTHS */
  --width-xxs: 320px;
  --width-xxs-rem: 20rem;
  --width-sm: 480px;
  --width-sm-rem: 30rem;
  --width-lg: 640px;
  --width-lg-rem: 40rem;
  --width-xl: 768px;
  --width-xl-rem: 48rem;
  --width-2xl: 1024px;
  --width-2xl-rem: 64rem;
  --width-3xl: 1280px;
  --width-3xl-rem: 80rem;
  --width-4xl: 1440px;
  --width-4xl-rem: 90rem;
  --width-5xl: 1600px;
  --width-5xl-rem: 100rem;
  --width-6xl: 1920px;
  --width-6xl-rem: 120rem;
  --width-md: 560px;
  --width-md-rem: 35rem;
  --paragraph-max-width: 720px;
  --paragraph-max-width-rem: 45rem;
  --width-xs: 384px;
  --width-xs-rem: 24rem;
  /* 5. CONTAINERS */
  --container-max-width-desktop: 1280px;
  --container-max-width-desktop-rem: 80rem;
  --container-padding-desktop: 32px;
  --container-padding-desktop-rem: 2rem;
  --container-padding-mobile: 16px;
  --container-padding-mobile-rem: 1rem;
  /* 2. RADIUS */
  --radius-none: 0px;
  --radius-none-rem: 0rem;
  --radius-xxs: 2px;
  --radius-xxs-rem: 0.125rem;
  --radius-xs: 4px;
  --radius-xs-rem: 0.25rem;
  --radius-sm: 6px;
  --radius-sm-rem: 0.375rem;
  --radius-md: 8px;
  --radius-md-rem: 0.5rem;
  --radius-xl: 12px;
  --radius-xl-rem: 0.75rem;
  --radius-2xl: 16px;
  --radius-2xl-rem: 1rem;
  --radius-4xl: 24px;
  --radius-4xl-rem: 1.5rem;
  --radius-full: 9999px;
  --radius-full-rem: 624.9375rem;
  --radius-lg: 10px;
  --radius-lg-rem: 0.625rem;
  --radius-3xl: 20px;
  --radius-3xl-rem: 1.25rem;
  /* _PRIMITIVE SPACINGS */
  --spacing-0-0px: 0px;
  --spacing-0-0px-rem: 0rem;
  --spacing-0-5-2px: 2px;
  --spacing-0-5-2px-rem: 0.125rem;
  --spacing-1-4px: 4px;
  --spacing-1-4px-rem: 0.25rem;
  --spacing-2-8px: 8px;
  --spacing-2-8px-rem: 0.5rem;
  --spacing-3-12px: 12px;
  --spacing-3-12px-rem: 0.75rem;
  --spacing-4-16px: 16px;
  --spacing-4-16px-rem: 1rem;
  --spacing-5-20px: 20px;
  --spacing-5-20px-rem: 1.25rem;
  --spacing-6-24px: 24px;
  --spacing-6-24px-rem: 1.5rem;
  --spacing-8-32px: 32px;
  --spacing-8-32px-rem: 2rem;
  --spacing-10-40px: 40px;
  --spacing-10-40px-rem: 2.5rem;
  --spacing-12-48px: 48px;
  --spacing-12-48px-rem: 3rem;
  --spacing-16-64px: 64px;
  --spacing-16-64px-rem: 4rem;
  --spacing-20-80px: 80px;
  --spacing-20-80px-rem: 5rem;
  --spacing-24-96px: 96px;
  --spacing-24-96px-rem: 6rem;
  --spacing-32-128px: 128px;
  --spacing-32-128px-rem: 8rem;
  --spacing-40-160px: 160px;
  --spacing-40-160px-rem: 10rem;
  --spacing-48-192px: 192px;
  --spacing-48-192px-rem: 12rem;
  --spacing-56-224px: 224px;
  --spacing-56-224px-rem: 14rem;
  --spacing-64-256px: 256px;
  --spacing-64-256px-rem: 16rem;
  --spacing-96-384px: 384px;
  --spacing-96-384px-rem: 24rem;
  --spacing-80-320px: 320px;
  --spacing-80-320px-rem: 20rem;
  --spacing-120-480px: 480px;
  --spacing-120-480px-rem: 30rem;
  --spacing-160-640px: 640px;
  --spacing-160-640px-rem: 40rem;
  --spacing-192-768px: 768px;
  --spacing-192-768px-rem: 48rem;
  --spacing-256-1-024px: 1024px;
  --spacing-256-1-024px-rem: 64rem;
  --spacing-320-1-280px: 1280px;
  --spacing-320-1-280px-rem: 80rem;
  --spacing-360-1-440px: 1440px;
  --spacing-360-1-440px-rem: 90rem;
  --spacing-400-1-600px: 1600px;
  --spacing-400-1-600px-rem: 100rem;
  --spacing-480-1-920px: 1920px;
  --spacing-480-1-920px-rem: 120rem;
  --spacing-1-5-6px: 6px;
  --spacing-1-5-6px-rem: 0.375rem;
  --spacing-140-560px: 560px;
  --spacing-140-560px-rem: 35rem;
  --spacing-180-720px: 720px;
  --spacing-180-720px-rem: 45rem;
  --font-family-font-family-display: Roboto;
  --font-family-font-family-body: Roboto;
  --font-size-display-xs: 24px;
  --font-size-text-sm: 14px;
  --font-size-text-md: 16px;
  --line-height-text-sm: 20px;
  --line-height-display-xs: 32px;
  --line-height-text-md: 24px;
  --colors-border-border-brand: #F5620F;
  --colors-foreground-fg-brand-primary-500: #F5620F;
  --colors-foreground-fg-quaternary-500: #727171;
}

/* _Primitives - Style */
:root {
  --colors-base-white: #FFFFFFFF;
  --colors-base-black: #000000FF;
  --colors-base-transparent: #FFFFFF00;
  --colors-gray-light-mode-25: #FCFCFDFF;
  --colors-gray-light-mode-50: #FBFBFBFF;
  --colors-gray-light-mode-100: #F7F7F7FF;
  --colors-gray-light-mode-200: #EDEDEDFF;
  --colors-gray-light-mode-300: #D2D2D2FF;
  --colors-gray-light-mode-400: #8C8C8CFF;
  --colors-gray-light-mode-500: #727171FF;
  --colors-gray-light-mode-600: #6A6A6AFF;
  --colors-gray-light-mode-700: #525252FF;
  --colors-gray-light-mode-800: #3B3B3BFF;
  --colors-gray-light-mode-900: #313131FF;
  --colors-gray-light-mode-950: #1F1F1FFF;
  --colors-gray-dark-mode-25: #FCFCFDFF;
  --colors-gray-dark-mode-50: #FBFBFBFF;
  --colors-gray-dark-mode-100: #F7F7F7FF;
  --colors-gray-dark-mode-200: #EDEDEDFF;
  --colors-gray-dark-mode-300: #D2D2D2FF;
  --colors-gray-dark-mode-400: #8C8C8CFF;
  --colors-gray-dark-mode-500:
  #727171FF;
  --colors-gray-dark-mode-600: #6A6A6AFF;
  --colors-gray-dark-mode-700: #525252FF;
  --colors-gray-dark-mode-800: #3B3B3BFF;
  --colors-gray-dark-mode-900: #232323;
  --colors-gray-dark-mode-950: #1F1F1FFF;
  --colors-gray-dark-mode-alpha-25: #FFFFFFFA;
  --colors-gray-dark-mode-alpha-50: #FFFFFFF5;
  --colors-gray-dark-mode-alpha-100: #FFFFFFF0;
  --colors-gray-dark-mode-alpha-200: #FFFFFFEB;
  --colors-gray-dark-mode-alpha-300: #FFFFFFCC;
  --colors-gray-dark-mode-alpha-400: #FFFFFF8F;
  --colors-gray-dark-mode-alpha-500: #FFFFFF80;
  --colors-gray-dark-mode-alpha-600: #FFFFFF59;
  --colors-gray-dark-mode-alpha-700: #FFFFFF29;
  --colors-gray-dark-mode-alpha-800: #FFFFFF14;
  --colors-gray-dark-mode-alpha-900: #FFFFFF0A;
  --colors-gray-dark-mode-alpha-950: #FFFFFF00;
  --colors-brand-25: #FFFAF8FF;
  --colors-brand-50: #FEF5F0FF;
  --colors-brand-100: #FEEBE1FF;
  --colors-brand-200: #FCD5BFFF;
  --colors-brand-300: #FAAF85FF;
  --colors-brand-400: #F7813FFF;
  --colors-brand-500: #F5620FFF;
  --colors-brand-600: #D4550CFF;
  --colors-brand-700: #AE460BFF;
  --colors-brand-800: #873608FF;
  --colors-brand-900: #672906FF;
  --colors-brand-950: #672906FF;
  --colors-error-25: #FFFBFAFF;
  --colors-error-50: #FEF3F2FF;
  --colors-error-100: #FEE4E2FF;
  --colors-error-200: #FECDCAFF;
  --colors-error-300: #FDA29BFF;
  --colors-error-400: #F97066FF;
  --colors-error-500: #F04438FF;
  --colors-error-600: #D92D20FF;
  --colors-error-700: #B42318FF;
  --colors-error-800: #912018FF;
  --colors-error-900: #7A271AFF;
  --colors-error-950: #55160CFF;
  --colors-warning-25: #FFFCF5FF;
  --colors-warning-50: #FFFAEBFF;
  --colors-warning-100: #FEF0C7FF;
  --colors-warning-200: #FEDF89FF;
  --colors-warning-300: #FEC84BFF;
  --colors-warning-400: #FDB022FF;
  --colors-warning-500: #F79009FF;
  --colors-warning-600: #DC6803FF;
  --colors-warning-700: #B54708FF;
  --colors-warning-800: #93370DFF;
  --colors-warning-900: #7A2E0EFF;
  --colors-warning-950: #4E1D09FF;
  --colors-success-25: #F6FEF9FF;
  --colors-success-50: #ECFDF3FF;
  --colors-success-100: #DCFAE6FF;
  --colors-success-200: #ABEFC6FF;
  --colors-success-300: #75E0A7FF;
  --colors-success-400: #47CD89FF;
  --colors-success-500: #17B26AFF;
  --colors-success-600: #079455FF;
  --colors-success-700: #067647FF;
  --colors-success-800: #085D3AFF;
  --colors-success-900: #074D31FF;
  --colors-success-950: #053321FF;
  --colors-gray-blue-25: #FCFCFDFF;
  --colors-gray-blue-50: #F8F9FCFF;
  --colors-gray-blue-100: #EAECF5FF;
  --colors-gray-blue-200: #D5D9EBFF;
  --colors-gray-blue-300: #B3B8DBFF;
  --colors-gray-blue-400: #717BBCFF;
  --colors-gray-blue-500: #4E5BA6FF;
  --colors-gray-blue-600: #3E4784FF;
  --colors-gray-blue-700: #363F72FF;
  --colors-gray-blue-800: #293056FF;
  --colors-gray-blue-900: #101323FF;
  --colors-gray-blue-950: #0D0F1CFF;
  --colors-gray-cool-25: #FCFCFDFF;
  --colors-gray-cool-50: #F9F9FBFF;
  --colors-gray-cool-100: #EFF1F5FF;
  --colors-gray-cool-200: #DCDFEAFF;
  --colors-gray-cool-300: #B9C0D4FF;
  --colors-gray-cool-400: #7D89B0FF;
  --colors-gray-cool-500: #5D6B98FF;
  --colors-gray-cool-600: #4A5578FF;
  --colors-gray-cool-700: #404968FF;
  --colors-gray-cool-800: #30374FFF;
  --colors-gray-cool-900: #111322FF;
  --colors-gray-cool-950: #0E101BFF;
  --colors-gray-modern-25: #FCFCFDFF;
  --colors-gray-modern-50: #F8FAFCFF;
  --colors-gray-modern-100: #EEF2F6FF;
  --colors-gray-modern-200: #E3E8EFFF;
  --colors-gray-modern-300: #CDD5DFFF;
  --colors-gray-modern-400: #9AA4B2FF;
  --colors-gray-modern-500: #697586FF;
  --colors-gray-modern-600: #4B5565FF;
  --colors-gray-modern-700: #364152FF;
  --colors-gray-modern-800: #202939FF;
  --colors-gray-modern-900: #121926FF;
  --colors-gray-modern-950: #0D121CFF;
  --colors-gray-neutral-25: #FCFCFDFF;
  --colors-gray-neutral-50: #F9FAFBFF;
  --colors-gray-neutral-100: #F3F4F6FF;
  --colors-gray-neutral-200: #E5E7EBFF;
  --colors-gray-neutral-300: #D2D6DBFF;
  --colors-gray-neutral-400: #9DA4AEFF;
  --colors-gray-neutral-500: #6C737FFF;
  --colors-gray-neutral-600: #4D5761FF;
  --colors-gray-neutral-700: #384250FF;
  --colors-gray-neutral-800: #1F2A37FF;
  --colors-gray-neutral-900: #111927FF;
  --colors-gray-neutral-950: #0D121CFF;
  --colors-gray-iron-25: #FCFCFCFF;
  --colors-gray-iron-50: #FAFAFAFF;
  --colors-gray-iron-100: #F4F4F5FF;
  --colors-gray-iron-200: #E4E4E7FF;
  --colors-gray-iron-300: #D1D1D6FF;
  --colors-gray-iron-400: #A0A0ABFF;
  --colors-gray-iron-500: #70707BFF;
  --colors-gray-iron-600: #51525CFF;
  --colors-gray-iron-700: #3F3F46FF;
  --colors-gray-iron-800: #26272BFF;
  --colors-gray-iron-900: #1A1A1EFF;
  --colors-gray-iron-950: #131316FF;
  --colors-gray-true-25: #FCFCFCFF;
  --colors-gray-true-50: #F7F7F7FF;
  --colors-gray-true-100: #F5F5F5FF;
  --colors-gray-true-200: #E5E5E5FF;
  --colors-gray-true-300: #D6D6D6FF;
  --colors-gray-true-400: #A3A3A3FF;
  --colors-gray-true-500: #737373FF;
  --colors-gray-true-600: #525252FF;
  --colors-gray-true-700: #424242FF;
  --colors-gray-true-800: #292929FF;
  --colors-gray-true-900: #141414FF;
  --colors-gray-true-950: #0F0F0FFF;
  --colors-gray-warm-25: #FDFDFCFF;
  --colors-gray-warm-50: #FAFAF9FF;
  --colors-gray-warm-100: #F5F5F4FF;
  --colors-gray-warm-200: #E7E5E4FF;
  --colors-gray-warm-300: #D7D3D0FF;
  --colors-gray-warm-400: #A9A29DFF;
  --colors-gray-warm-500: #79716BFF;
  --colors-gray-warm-600: #57534EFF;
  --colors-gray-warm-700: #44403CFF;
  --colors-gray-warm-800: #292524FF;
  --colors-gray-warm-900: #1C1917FF;
  --colors-gray-warm-950: #171412FF;
  --colors-moss-25: #FAFDF7FF;
  --colors-moss-50: #F5FBEEFF;
  --colors-moss-100: #E6F4D7FF;
  --colors-moss-200: #CEEAB0FF;
  --colors-moss-300: #ACDC79FF;
  --colors-moss-400: #86CB3CFF;
  --colors-moss-500: #669F2AFF;
  --colors-moss-600: #4F7A21FF;
  --colors-moss-700: #3F621AFF;
  --colors-moss-800: #335015FF;
  --colors-moss-900: #2B4212FF;
  --colors-moss-950: #1A280BFF;
  --colors-green-light-25: #FAFEF5FF;
  --colors-green-light-50: #F3FEE7FF;
  --colors-green-light-100: #E3FBCCFF;
  --colors-green-light-200: #D0F8ABFF;
  --colors-green-light-300: #A6EF67FF;
  --colors-green-light-400: #85E13AFF;
  --colors-green-light-500: #66C61CFF;
  --colors-green-light-600: #4CA30DFF;
  --colors-green-light-700: #3B7C0FFF;
  --colors-green-light-800: #326212FF;
  --colors-green-light-900: #2B5314FF;
  --colors-green-light-950: #15290AFF;
  --colors-green-25: #F6FEF9FF;
  --colors-green-50: #EDFCF2FF;
  --colors-green-100: #D3F8DFFF;
  --colors-green-200: #AAF0C4FF;
  --colors-green-300: #73E2A3FF;
  --colors-green-400: #3CCB7FFF;
  --colors-green-500: #16B364FF;
  --colors-green-600: #099250FF;
  --colors-green-700: #087443FF;
  --colors-green-800: #095C37FF;
  --colors-green-900: #084C2EFF;
  --colors-green-950: #052E1CFF;
  --colors-teal-25: #F6FEFCFF;
  --colors-teal-50: #F0FDF9FF;
  --colors-teal-100: #CCFBEFFF;
  --colors-teal-200: #99F6E0FF;
  --colors-teal-300: #5FE9D0FF;
  --colors-teal-400: #2ED3B7FF;
  --colors-teal-500: #15B79EFF;
  --colors-teal-600: #0E9384FF;
  --colors-teal-700: #107569FF;
  --colors-teal-800: #125D56FF;
  --colors-teal-900: #134E48FF;
  --colors-teal-950: #0A2926FF;
  --colors-cyan-25: #F5FEFFFF;
  --colors-cyan-50: #ECFDFFFF;
  --colors-cyan-100: #CFF9FEFF;
  --colors-cyan-200: #A5F0FCFF;
  --colors-cyan-300: #67E3F9FF;
  --colors-cyan-400: #22CCEEFF;
  --colors-cyan-500: #06AED4FF;
  --colors-cyan-600: #088AB2FF;
  --colors-cyan-700: #0E7090FF;
  --colors-cyan-800: #155B75FF;
  --colors-cyan-900: #164C63FF;
  --colors-cyan-950: #0D2D3AFF;
  --colors-blue-light-25: #F5FBFFFF;
  --colors-blue-light-50: #F0F9FFFF;
  --colors-blue-light-100: #E0F2FEFF;
  --colors-blue-light-200: #B9E6FEFF;
  --colors-blue-light-300: #7CD4FDFF;
  --colors-blue-light-400: #36BFFAFF;
  --colors-blue-light-500: #0BA5ECFF;
  --colors-blue-light-600: #0086C9FF;
  --colors-blue-light-700: #026AA2FF;
  --colors-blue-light-800: #065986FF;
  --colors-blue-light-900: #0B4A6FFF;
  --colors-blue-light-950: #062C41FF;
  --colors-blue-25: #F5FAFFFF;
  --colors-blue-50: #EFF8FFFF;
  --colors-blue-100: #D1E9FFFF;
  --colors-blue-200: #B2DDFFFF;
  --colors-blue-300: #84CAFFFF;
  --colors-blue-400: #53B1FDFF;
  --colors-blue-500: #2E90FAFF;
  --colors-blue-600: #1570EFFF;
  --colors-blue-700: #175CD3FF;
  --colors-blue-800: #1849A9FF;
  --colors-blue-900: #194185FF;
  --colors-blue-950: #102A56FF;
  --colors-blue-dark-25: #F5F8FFFF;
  --colors-blue-dark-50: #EFF4FFFF;
  --colors-blue-dark-100: #D1E0FFFF;
  --colors-blue-dark-200: #B2CCFFFF;
  --colors-blue-dark-300: #84ADFFFF;
  --colors-blue-dark-400: #528BFFFF;
  --colors-blue-dark-500: #2970FFFF;
  --colors-blue-dark-600: #155EEFFF;
  --colors-blue-dark-700: #004EEBFF;
  --colors-blue-dark-800: #0040C1FF;
  --colors-blue-dark-900: #00359EFF;
  --colors-blue-dark-950: #002266FF;
  --colors-indigo-25: #F5F8FFFF;
  --colors-indigo-50: #EEF4FFFF;
  --colors-indigo-100: #E0EAFFFF;
  --colors-indigo-200: #C7D7FEFF;
  --colors-indigo-300: #A4BCFDFF;
  --colors-indigo-400: #8098F9FF;
  --colors-indigo-500: #6172F3FF;
  --colors-indigo-600: #444CE7FF;
  --colors-indigo-700: #3538CDFF;
  --colors-indigo-800: #2D31A6FF;
  --colors-indigo-900: #2D3282FF;
  --colors-indigo-950: #1F235BFF;
  --colors-violet-25: #FBFAFFFF;
  --colors-violet-50: #F5F3FFFF;
  --colors-violet-100: #ECE9FEFF;
  --colors-violet-200: #DDD6FEFF;
  --colors-violet-300: #C3B5FDFF;
  --colors-violet-400: #A48AFBFF;
  --colors-violet-500: #875BF7FF;
  --colors-violet-600: #7839EEFF;
  --colors-violet-700: #6927DAFF;
  --colors-violet-800: #5720B7FF;
  --colors-violet-900: #491C96FF;
  --colors-violet-950: #2E125EFF;
  --colors-purple-25: #FAFAFFFF;
  --colors-purple-50: #F4F3FFFF;
  --colors-purple-100: #EBE9FEFF;
  --colors-purple-200: #D9D6FEFF;
  --colors-purple-300: #BDB4FEFF;
  --colors-purple-400: #9B8AFBFF;
  --colors-purple-500: #7A5AF8FF;
  --colors-purple-600: #6938EFFF;
  --colors-purple-700: #5925DCFF;
  --colors-purple-800: #4A1FB8FF;
  --colors-purple-900: #3E1C96FF;
  --colors-purple-950: #27115FFF;
  --colors-fuchsia-25: #FEFAFFFF;
  --colors-fuchsia-50: #FDF4FFFF;
  --colors-fuchsia-100: #FBE8FFFF;
  --colors-fuchsia-200: #F6D0FEFF;
  --colors-fuchsia-300: #EEAAFDFF;
  --colors-fuchsia-400: #E478FAFF;
  --colors-fuchsia-500: #D444F1FF;
  --colors-fuchsia-600: #BA24D5FF;
  --colors-fuchsia-700: #9F1AB1FF;
  --colors-fuchsia-800: #821890FF;
  --colors-fuchsia-900: #6F1877FF;
  --colors-fuchsia-950: #47104CFF;
  --colors-pink-25: #FEF6FBFF;
  --colors-pink-50: #FDF2FAFF;
  --colors-pink-100: #FCE7F6FF;
  --colors-pink-200: #FCCEEEFF;
  --colors-pink-300: #FAA7E0FF;
  --colors-pink-400: #F670C7FF;
  --colors-pink-500: #EE46BCFF;
  --colors-pink-600: #DD2590FF;
  --colors-pink-700: #C11574FF;
  --colors-pink-800: #9E165FFF;
  --colors-pink-900: #851651FF;
  --colors-pink-950: #4E0D30FF;
  --colors-rose-25: #FFF5F6FF;
  --colors-rose-50: #FFF1F3FF;
  --colors-rose-100: #FFE4E8FF;
  --colors-rose-200: #FECDD6FF;
  --colors-rose-300: #FEA3B4FF;
  --colors-rose-400: #FD6F8EFF;
  --colors-rose-500: #F63D68FF;
  --colors-rose-600: #E31B54FF;
  --colors-rose-700: #C01048FF;
  --colors-rose-800: #A11043FF;
  --colors-rose-900: #89123EFF;
  --colors-rose-950: #510B24FF;
  --colors-orange-dark-25: #FFF9F5FF;
  --colors-orange-dark-50: #FFF4EDFF;
  --colors-orange-dark-100: #FFE6D5FF;
  --colors-orange-dark-200: #FFD6AEFF;
  --colors-orange-dark-300: #FF9C66FF;
  --colors-orange-dark-400: #FF692EFF;
  --colors-orange-dark-500: #FF4405FF;
  --colors-orange-dark-600: #E62E05FF;
  --colors-orange-dark-700: #BC1B06FF;
  --colors-orange-dark-800: #97180CFF;
  --colors-orange-dark-900: #771A0DFF;
  --colors-orange-dark-950: #57130AFF;
  --colors-orange-25: #FEFAF5FF;
  --colors-orange-50: #FEF6EEFF;
  --colors-orange-100: #FDEAD7FF;
  --colors-orange-200: #F9DBAFFF;
  --colors-orange-300: #F7B27AFF;
  --colors-orange-400: #F38744FF;
  --colors-orange-500: #EF6820FF;
  --colors-orange-600: #E04F16FF;
  --colors-orange-700: #B93815FF;
  --colors-orange-800: #932F19FF;
  --colors-orange-900: #772917FF;
  --colors-orange-950: #511C10FF;
  --colors-yellow-25: #FEFDF0FF;
  --colors-yellow-50: #FEFBE8FF;
  --colors-yellow-100: #FEF7C3FF;
  --colors-yellow-200: #FEEE95FF;
  --colors-yellow-300: #FDE272FF;
  --colors-yellow-400: #FAC515FF;
  --colors-yellow-500: #EAAA08FF;
  --colors-yellow-600: #CA8504FF;
  --colors-yellow-700: #A15C07FF;
  --colors-yellow-800: #854A0EFF;
  --colors-yellow-900: #713B12FF;
  --colors-yellow-950: #542C0DFF;
  --colors-base-white: #ffffff;
  --colors-base-black: #000000;
  --colors-base-transparent: #ffffff00;
  --colors-gray-25: #fcfcfd;
  --colors-gray-50: #fbfbfb;
  --colors-gray-100: #f7f7f7;
  --colors-gray-200: #ededed;
  --colors-gray-300: #d2d2d2;
  --colors-gray-400: #8c8c8c;
  --colors-gray-500: #727171;
  --colors-gray-600: #6a6a6a;
  --colors-gray-700: #525252;
  --colors-gray-800: #3b3b3b;
  --colors-gray-900: #313131;
  --colors-gray-950: #1f1f1f;
  --colors-brand-25: #fffaf8;
  --colors-brand-50: #fef5f0;
  --colors-brand-100: #feece2;
  --colors-brand-200: #fcd5c0;
  --colors-brand-300: #faaf85;
  --colors-brand-400: #f7813f;
  --colors-brand-500: #f5620f;
  --colors-brand-600: #d4550c;
  --colors-brand-700: #ae460b;
  --colors-brand-800: #873608;
  --colors-brand-900: #672906;
  --colors-brand-950: #672906;
  --colors-error-25: #fffbfa;
  --colors-error-50: #fef3f2;
  --colors-error-100: rgba(254, 228, 226, 1);
  --colors-error-200: rgba(254, 205, 202, 1);
  --colors-error-300: rgba(253, 162, 155, 1);
  --colors-error-400: rgba(249, 112, 102, 1);
  --colors-error-500: rgba(255, 60, 60, 1);
  --colors-error-600: rgba(234, 43, 43, 1);
  --colors-error-700: rgba(199, 35, 35, 1);
  --colors-error-800: rgba(151, 26, 26, 1);
  --colors-error-900: rgba(111, 18, 18, 1);
  --colors-error-950: rgba(88, 14, 14, 1);
  --colors-warning-25: rgba(255, 252, 245, 1);
  --colors-warning-50: rgba(255, 250, 235, 1);
  --colors-warning-100: rgba(254, 240, 199, 1);
  --colors-warning-200: rgba(254, 223, 137, 1);
  --colors-warning-300: rgba(254, 200, 75, 1);
  --colors-warning-400: rgba(253, 176, 34, 1);
  --colors-warning-500: rgba(247, 144, 9, 1);
  --colors-warning-600: rgba(220, 104, 3, 1);
  --colors-warning-700: rgba(181, 71, 8, 1);
  --colors-warning-800: rgba(147, 55, 13, 1);
  --colors-warning-900: rgba(122, 46, 14, 1);
  --colors-warning-950: rgba(78, 29, 9, 1);
  --colors-success-25: rgba(246, 254, 249, 1);
  --colors-success-50: rgba(236, 253, 243, 1);
  --colors-success-100: rgba(220, 250, 230, 1);
  --colors-success-200: rgba(171, 239, 198, 1);
  --colors-success-300: rgba(117, 224, 167, 1);
  --colors-success-400: rgba(71, 205, 137, 1);
  --colors-success-500: rgba(23, 178, 106, 1);
  --colors-success-600: rgba(7, 148, 85, 1);
  --colors-success-700: rgba(6, 118, 71, 1);
  --colors-success-800: rgba(8, 93, 58, 1);
  --colors-success-900: rgba(7, 77, 49, 1);
  --colors-success-950: rgba(5, 51, 33, 1);
  --spacing-0: 0px;
  --spacing-0․5: 2px;
  --spacing-1: 4px;
  --spacing-1․5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-40: 160px;
  --spacing-48: 192px;
  --spacing-56: 224px;
  --spacing-64: 256px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-120: 480px;
  --spacing-140: 560px;
  --spacing-160: 640px;
  --spacing-180: 720px;
  --spacing-192: 768px;
  --spacing-256: 1024px;
  --spacing-320: 1280px;
  --spacing-360: 1440px;
  --spacing-400: 1600px;
  --spacing-480: 1920px;
}

/* 5. Containers - Value */
:root {
  --container-padding-mobile: var(--spacing-4);
  --container-padding-desktop: var(--spacing-8);
  --container-max-width-desktop: var(--spacing-320);
}

/* 4. Widths - Mode 1 */
:root {
  --width-xxs: var(--spacing-80);
  --width-xs: var(--spacing-96);
  --width-sm: var(--spacing-120);
  --width-md: var(--spacing-140);
  --width-lg: var(--spacing-160);
  --width-xl: var(--spacing-192);
  --width-2xl: var(--spacing-256);
  --width-3xl: var(--spacing-320);
  --width-4xl: var(--spacing-360);
  --width-5xl: var(--spacing-400);
  --width-6xl: var(--spacing-480);
  --paragraph-max-width: var(--spacing-180);
}

/* 3. Spacing - Mode 1 */
:root {
  --spacing-none: var(--spacing-0);
  --spacing-xxs: var(--spacing-0․5);
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-1․5);
  --spacing-md: var(--spacing-2);
  --spacing-lg: var(--spacing-3);
  --spacing-xl: var(--spacing-4);
  --spacing-2xl: var(--spacing-5);
  --spacing-3xl: var(--spacing-6);
  --spacing-4xl: var(--spacing-8);
  --spacing-5xl: var(--spacing-10);
  --spacing-6xl: var(--spacing-12);
  --spacing-7xl: var(--spacing-16);
  --spacing-8xl: var(--spacing-20);
  --spacing-9xl: var(--spacing-24);
  --spacing-10xl: var(--spacing-32);
  --spacing-11xl: var(--spacing-40);
}

/* 2. Radius - Mode 1 */
:root {
  --radius-none: 0px;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 9999px;
}

/* 6. Typography - Value */
:root {
  --font-family-font-family-display: Roboto;
  --font-family-font-family-body: Roboto;
  --font-weight-regular: Regular;
  --font-weight-regular-italic: Regular italic;
  --font-weight-medium: Medium;
  --font-weight-medium-italic: Medium italic;
  --font-weight-semibold: Semibold;
  --font-weight-semibold-italic: Semibold italic;
  --font-weight-bold: Bold;
  --font-weight-bold-italic: Bold italic;
  --font-size-text-xs: 12px;
  --line-height-text-xs: 18px;
  --line-height-text-sm: 20px;
  --line-height-text-md: 24px;
  --line-height-text-lg: 28px;
  --line-height-text-xl: 30px;
  --line-height-display-xs: 32px;
  --line-height-display-sm: 38px;
  --line-height-display-md: 44px;
  --line-height-display-lg: 60px;
  --line-height-display-xl: 72px;
  --line-height-display-2xl: 90px;
  --font-size-text-sm: 14px;
  --font-size-text-md: 16px;
  --font-size-text-lg: 18px;
  --font-size-text-xl: 20px;
  --font-size-display-xs: 24px;
  --font-size-display-sm: 30px;
  --font-size-display-md: 36px;
  --font-size-display-lg: 48px;
  --font-size-display-xl: 60px;
  --font-size-display-2xl: 72px;
}

.dark-mode {
  --text-color: #FFFFFF;
  --text-color-second: #cccccc;
  --text-color-second-dark: #8c8c8c;
  --icon-color: #8c8c8c;
  --icon-color-light: #A8A8A8;
  --bg-color-rgb-consts: 41, 41, 41;
  --bg-color: rgb(var(--bg-color-rgb-consts));
  --layout-bg-color: rgba(29, 29, 29, 1);
  --bg-color-second-rgb-consts: 49, 49, 49;
  --bg-color-second: rgb(var(--bg-color-second-rgb-consts));
  --border-color-light: #4B4B4B;
  --border-color: #4B4B4B;
  --bg-hover-color: #4B4B4B;
  --button-secondary-bg: #4B4B4B;
  --section-border: 1px solid var(--border-color);
  --border: 1px solid var(--border-color);
  --header-border: 1px solid #383838;
  --mobile-menu-bg-color: rgba(var(--bg-color-second-rgb-consts), 0.7);
  --mobile-menu-bg-popup: rgba(var(--bg-color-rgb-consts), 0.8);
  --box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5);
  --tag-bg: #4B4B4B;
  --popup-bg-color: #4b4b4b;
  --popup-contrast-color: #3E3E3E;
  --popup-hover-color: #3D3D3D;
}

.dark-mode {
  --background-bg-primary: var(--colors-gray-7);
  --background-bg-secondary: var(--colors-gray-6);
  --background-bg-primary_hover: var(--colors-gray-6);
  --background-bg-secondary_hover: var(--colors-gray-5);
  --background-bg-tertiary: var(--colors-gray-5);
  --background-bg-tertiary_hover: var(--colors-gray-4);
  --background-bg-brand-solid: var(--colors-brand-5);
  --text-text-primary: var(--colors-base-white);
  --text-text-secondary: var(--colors-gray-2);
  --text-text-tertiary: var(--colors-gray-3);
  --text-text-white: var(--colors-base-white);
  --button-primary-button-primary-bg: var(--colors-brand-5);
  --button-primary-button-primary-bg_hover: var(--colors-brand-4);
  --button-primary-button-primary-text: var(--text-text-white);
  --foreground-fg-white: var(--colors-base-white);
  --border-border-brand: var(--colors-brand-4);
  --border-border-brand-subtle: var(--colors-brand-3);
  --foreground-fg-primary: var(--colors-base-white);
  --foreground-fg-secondary: var(--colors-gray-2);
  --foreground-fg-tertiary: var(--colors-gray-3);
  --text-text-disabled: var(--colors-gray-4);
  --text-text-placeholder: var(--colors-gray-4);
  --border-border-primary: var(--colors-gray-4);
  --border-border-secondary: var(--colors-gray-5);
  --button-link-brand-button-link-brand-color: var(--colors-brand-5);
  --button-link-brand-button-link-brand-color-fg: var(--colors-brand-4);
  --button-link-brand-button-link-brand-color_hover: var(--colors-brand-4);
  --foreground-fg-disabled: var(--colors-gray-4);
  --button-link-gray-button-link-gray-color: var(--colors-gray-3);
  --button-link-gray-button-link-gray-color_hover: var(--colors-brand-5);
  --button-link-gray-button-link-gray-color-fg: var(--colors-gray-3);
  --button-secondary-outline-brand-button-secondary-brand-border: var(--colors-brand-5);
  --button-secondary-outline-brand-button-secondary-brand-border_hover: var(--colors-brand-4);
  --button-secondary-outline-brand-button-secondary-brand-text: var(--colors-brand-5);
  --button-secondary-outline-brand-button-secondary-brand-text_hover: var(--colors-brand-4);
  --button-secondary-outline-brand-button-secondary-brand-fg: var(--colors-brand-5);
  --button-secondary-outline-brand-button-secondary-brand-fg_hover: var(--colors-brand-4);
  --background-bg-disabled: var(--colors-gray-6);
  --border-border-disabled: var(--colors-gray-6);
  --button-secondary-outline-negative-button-secondary-negative-border: var(--colors-base-white);
  --button-secondary-outline-negative-button-secondary-negative-border_hover: var(--colors-brand-5);
  --button-secondary-outline-negative-button-secondary-negative-text: var(--colors-text-text-white);
  --button-secondary-outline-negative-button-secondary-negative-text_hover: var(--colors-brand-5);
  --button-secondary-outline-negative-button-secondary-negative-fg: var(--colors-foreground-fg-white);
  --button-secondary-outline-negative-button-secondary-negative-fg_hover: var(--colors-brand-5);
  --border-border-brand-solid: var(--colors-brand-5);
  --badge-gray-badge-gray-bg: var(--background-bg-secondary);
  --badge-gray-badge-gray-text: var(--colors-base-white);
  --badge-gray-badge-gray-fg: var(--colors-gray-3);
  --background-bg-error-solid: var(--colors-error-5);
  --button-secondary-filled-button-secondary-filled-bg: var(--colors-gray-5);
  --button-secondary-filled-button-secondary-filled-bg_hover: var(--colors-gray-4);
  --button-secondary-filled-button-secondary-filled-text: var(--text-text-white);
  --button-primary-success-button-primary-success-bg: var(--colors-success-5);
  --button-primary-success-button-primary-success-bg_hover: var(--colors-success-4);
  --button-primary-success-button-primary-success-text: var(--text-text-white);
  --background-bg-warning-solid: var(--colors-warning-5);
  --background-bg-success-solid: var(--colors-success-5);
  --button-secondary-outline-gray-button-secondary-gray-border: var(--colors-gray-4);
  --button-secondary-outline-gray-button-secondary-gray-border_hover: var(--colors-brand-5);
  --button-secondary-outline-gray-button-secondary-gray-text: var(--colors-text-text-white);
  --button-secondary-outline-gray-button-secondary-gray-text_hover: var(--colors-brand-5);
  --button-secondary-outline-gray-button-secondary-gray-fg: var(--colors-foreground-fg-white);
  --button-secondary-outline-gray-button-secondary-gray-fg_hover: var(--colors-brand-5);
  --foreground-fg-disabled-subtle: var(--colors-gray-5);
  --text-text-quarternary: var(--colors-gray-4);
  --text-text-error-primary: var(--colors-error-5);
  --border-border-error: var(--colors-error-4);
  --text-text-quinary: var(--colors-gray-5);
  --foreground-fg-brand-primary: var(--colors-brand-5);
  --background-bg-brand-primary: var(--colors-brand-7);
  --text-text-error-secondary: var(--colors-error-6);
  --text-text-brand-primary: var(--colors-brand-5);
  --text-text-brand-secondary: var(--colors-brand-6);
  --background-bg-brand-secondary: var(--colors-brand-6);
  --foreground-fg-success-primary: var(--colors-success-5);
  --foreground-fg-success-secondary: var(--colors-success-6);
  --background-bg-success-primary: var(--colors-success-7);
  --background-bg-success-secondary: var(--colors-success-6);
  --background-bg-error-primary: var(--colors-error-7);
  --background-bg-error-secondary: var(--colors-error-6);
  --foreground-fg-error-primary: var(--colors-error-5);
  --foreground-fg-error-secondary: var(--colors-error-6);
  --badge-brand-badge-brand-bg: var(--colors-brand-5);
  --badge-brand-badge-brand-text: var(--colors-base-white);
  --badge-brand-badge-brand-fg: var(--colors-brand-2);
  --border-border-tertiary: var(--colors-gray-6);
  --badge-error-badge-error-bg: var(--background-bg-error-primary);
  --badge-error-badge-error-text: var(--text-text-white);
  --badge-error-badge-error-fg: var(--foreground-fg-error-secondary);
  --button-primary-error-button-primary-error-bg: var(--colors-error-5);
  --button-primary-error-button-primary-error-bg_hover: var(--colors-error-4);
  --button-primary-error-button-primary-error-text: var(--text-text-white);
  --button-secondary-outline-error-button-secondary-error-border: var(--colors-error-5);
  --button-secondary-outline-error-button-secondary-error-border_hover: var(--colors-error-4);
  --button-secondary-outline-error-button-secondary-error-text: var(--colors-error-5);
  --button-secondary-outline-error-button-secondary-error-text_hover: var(--colors-error-4);
  --button-secondary-outline-error-button-secondary-error-fg: var(--colors-error-5);
  --button-secondary-outline-error-button-secondary-error-fg_hover: var(--colors-error-4);
  --button-link-error-button-link-error-color: var(--colors-error-5);
  --button-link-error-button-link-error-color_hover: var(--colors-error-4);
  --button-link-error-button-link-error-color-fg: var(--colors-error-4);
  --input-input-bg: rgba(41 41 41 / 0.1);
  --input-input-border: #8c8c8c;
  --input-input-border_focus: var(--colors-gray-1);
  --input-input-border_hover: var(--colors-gray-3);
  --input-input-text: var(--colors-gray-3);
  --input-input-text-filled: var(--colors-gray-1);
  --input-input-text-error: var(--text-text-error-primary);
  --foreground-fg-brand-secondary: var(--colors-brand-6);
  --foreground-fg-warning-primary: var(--colors-warning-5);
  --foreground-fg-warning-secondary: var(--colors-warning-6);
  --text-text-success-primary: var(--colors-success-5);
  --text-text-success-secondary: var(--colors-success-6);
  --text-text-warning-primary: var(--colors-warning-5);
  --text-text-warning-secondary: var(--colors-warning-6);
  --text-text-senary: var(--colors-gray-6);
  --background-bg-white: var(--colors-base-white);
  --background-bg-quarterary: var(--colors-gray-4);
  --background-bg-quarterary_hover: var(--colors-gray-5);
  --colors-text-text-primary-900: #F5F5F6;
  --colors-text-text-secondary-700: #696969;
  --button-secondary-bg2: #313131;
  --button-secondary-border: #525252;
  --button-secondary-fg: #D2D2D2;
  --colors-background-bg-quaternary: #525252;
  --colors-foreground-fg-secondary-700: #D2D2D2;
  --colors-border-border-secondary: #3b3b3b;
  --colors-border-border-primary: #6a6a6a;
  --colors-foreground-fg-tertiary-600: #6A6A6A;
  --colors-text-text-secondary-700: #D2D2D2;
  --colors-foreground-fg-quinary-400: #727171;
  --colors-background-bg-primary_alt: #313131;
  --colors-foreground-fg-primary-900: #fff;
  --colors-background-bg-disabled: #3B3B3B;
  --colors-border-border-disabled_subtle: #3b3b3b;
  --colors-foreground-fg-disabled: #727171;
  --component-colors-utility-gray-utility-gray-200: #525252;
  --component-colors-utility-gray-utility-gray-50: #313131;
  --component-colors-utility-gray-utility-gray-700: #D2D2D2;
  --colors-effects-shadows-shadow-lg_01: rgba(255, 255, 255, 0.00);
  --colors-effects-shadows-shadow-lg_02: rgba(255, 255, 255, 0.00);
}

/* 1. Color modes - Dark mode */
.dark-mode {
  --colors-text-text-primary-900: var(--colors-base-white);
  --colors-text-text-primary_on-brand: var(--colors-gray-dark-mode-50);
  --colors-text-text-secondary-700: var(--colors-gray-dark-mode-50);
  --colors-text-text-secondary_hover: var(--colors-gray-dark-mode-300);
  --colors-text-text-secondary_on-brand: var(--colors-gray-dark-mode-200);
  --colors-text-text-tertiary-600: var(--colors-gray-dark-mode-400);
  --colors-text-text-tertiary_hover: var(--colors-gray-dark-mode-300);
  --colors-text-text-tertiary_on-brand: var(--colors-gray-dark-mode-400);
  --colors-text-text-quaternary-500: var(--colors-gray-dark-mode-400);
  --colors-text-text-quaternary_on-brand: var(--colors-gray-dark-mode-400);
  --colors-text-text-white: var(--colors-base-white);
  --colors-text-text-disabled: var(--colors-gray-dark-mode-500);
  --colors-text-text-placeholder: var(--colors-gray-dark-mode-500);
  --colors-text-text-placeholder_subtle: var(--colors-gray-dark-mode-700);
  --colors-text-text-brand-primary-900: var(--colors-gray-dark-mode-50);
  --colors-text-text-brand-secondary-700: var(--colors-gray-dark-mode-300);
  --colors-text-text-brand-secondary_hover: var(--colors-gray-dark-mode-200);
  --colors-text-text-brand-tertiary-600: var(--colors-gray-dark-mode-400);
  --colors-text-text-brand-tertiary_alt: var(--colors-gray-dark-mode-50);
  --colors-text-text-error-primary-600: var(--colors-error-400);
  --colors-text-text-error-primary_hover: var(--colors-error-300);
  --colors-text-text-warning-primary-600: var(--colors-warning-400);
  --colors-text-text-success-primary-600: var(--colors-success-400);
  --colors-border-border-primary: var(--colors-gray-dark-mode-700);
  --colors-border-border-secondary: var(--colors-gray-dark-mode-800);
  --colors-border-border-secondary_alt: var(--colors-gray-dark-mode-800);
  --colors-border-border-tertiary: var(--colors-gray-dark-mode-800);
  --colors-border-border-disabled: var(--colors-gray-dark-mode-700);
  --colors-border-border-disabled_subtle: var(--colors-gray-dark-mode-800);
  --colors-border-border-brand: var(--colors-brand-400);
  --colors-border-border-brand_alt: var(--colors-gray-dark-mode-700);
  --colors-border-border-error: var(--colors-error-400);
  --colors-border-border-error_subtle: var(--colors-error-500);
  --colors-foreground-fg-primary-900: var(--colors-base-white);
  --component-colors-alpha-alpha-white-10: #0C0E121A;
  --component-colors-alpha-alpha-white-20: #0C0E1233;
  --component-colors-alpha-alpha-white-30: #0C0E124D;
  --component-colors-alpha-alpha-white-40: #0C0E1266;
  --component-colors-alpha-alpha-white-50: #0C0E1280;
  --component-colors-alpha-alpha-white-60: #0C0E1299;
  --component-colors-alpha-alpha-white-70: #0C0E12B2;
  --component-colors-alpha-alpha-white-80: #0C0E12CC;
  --component-colors-alpha-alpha-white-90: #0C0E12E5;
  --component-colors-alpha-alpha-white-100: var(--colors-gray-dark-mode-950);
  --component-colors-alpha-alpha-black-10: #FFFFFF1A;
  --component-colors-alpha-alpha-black-20: #FFFFFF33;
  --component-colors-alpha-alpha-black-30: #FFFFFF4D;
  --component-colors-alpha-alpha-black-40: #FFFFFF66;
  --component-colors-alpha-alpha-black-50: #FFFFFF80;
  --component-colors-alpha-alpha-black-60: #FFFFFF99;
  --component-colors-alpha-alpha-black-70: #FFFFFFB2;
  --component-colors-alpha-alpha-black-80: #FFFFFFCC;
  --component-colors-alpha-alpha-black-90: #FFFFFFE5;
  --component-colors-alpha-alpha-black-100: #FFFFFFFF;
  --component-colors-utility-gray-utility-gray-50: var(--colors-gray-dark-mode-900);
  --component-colors-components-app-store-badges-app-store-badge-border: var(--colors-base-white);
  --component-colors-components-avatars-avatar-styles-bg-neutral: #E0E0E0FF;
  --component-colors-components-buttons-button-primary-icon: var(--colors-brand-300);
  --component-colors-components-buttons-button-primary-icon_hover: var(--colors-brand-200);
  --component-colors-components-buttons-button-destructive-primary-icon: var(--colors-error-300);
  --component-colors-components-buttons-button-destructive-primary-icon_hover: var(--colors-error-200);
  --component-colors-components-footers-footer-button-fg: var(--colors-gray-dark-mode-300);
  --component-colors-components-footers-footer-button-fg_hover: var(--colors-gray-dark-mode-100);
  --component-colors-components-icons-icons-icon-fg-brand: var(--colors-gray-dark-mode-400);
  --component-colors-components-icons-icons-icon-fg-brand_on-brand: var(--colors-gray-dark-mode-400);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: var(--colors-brand-200);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-gray: var(--colors-gray-dark-mode-200);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-error: var(--colors-error-200);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-warning: var(--colors-warning-200);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-success: var(--colors-success-200);
  --component-colors-components-mockups-screen-mockup-border: var(--colors-gray-dark-mode-700);
  --component-colors-components-sliders-slider-handle-bg: var(--colors-foreground-fg-brand-primary-600);
  --component-colors-components-sliders-slider-handle-border: var(--colors-background-bg-primary);
  --component-colors-components-toggles-toggle-button-fg_disabled: var(--colors-gray-dark-mode-600);
  --component-colors-components-toggles-toggle-border: var(--colors-base-transparent);
  --component-colors-components-toggles-toggle-slim-border_pressed: var(--colors-base-transparent);
  --component-colors-components-toggles-toggle-slim-border_pressed-hover: var(--colors-base-transparent);
  --component-colors-components-Tooltips-tooltip-supporting-text: var(--colors-gray-dark-mode-300);
  --component-colors-components-text-editor-text-editor-icon-fg: var(--colors-gray-dark-mode-400);
  --component-colors-components-text-editor-text-editor-icon-fg_active: var(--colors-base-white);
  --component-colors-utility-gray-utility-gray-100: var(--colors-gray-dark-mode-800);
  --component-colors-utility-gray-utility-gray-200: var(--colors-gray-dark-mode-700);
  --component-colors-utility-gray-utility-gray-300: var(--colors-gray-dark-mode-700);
  --component-colors-utility-gray-utility-gray-400: var(--colors-gray-dark-mode-600);
  --component-colors-utility-gray-utility-gray-500: var(--colors-gray-dark-mode-500);
  --component-colors-utility-gray-utility-gray-600: var(--colors-gray-dark-mode-400);
  --component-colors-utility-gray-utility-gray-700: var(--colors-gray-dark-mode-300);
  --component-colors-utility-gray-utility-gray-800: var(--colors-gray-dark-mode-200);
  --component-colors-utility-gray-utility-gray-900: var(--colors-gray-dark-mode-100);
  --component-colors-utility-brand-utility-brand-50: var(--colors-brand-950);
  --component-colors-utility-brand-utility-brand-50_alt: var(--component-colors-utility-gray-utility-gray-50);
  --component-colors-utility-brand-utility-brand-100: var(--colors-brand-900);
  --component-colors-utility-brand-utility-brand-100_alt: var(--component-colors-utility-gray-utility-gray-100);
  --component-colors-utility-brand-utility-brand-200: var(--colors-brand-800);
  --component-colors-utility-brand-utility-brand-200_alt: var(--component-colors-utility-gray-utility-gray-200);
  --component-colors-utility-brand-utility-brand-300: var(--colors-brand-700);
  --component-colors-utility-brand-utility-brand-300_alt: var(--component-colors-utility-gray-utility-gray-300);
  --component-colors-utility-brand-utility-brand-400: var(--colors-brand-600);
  --component-colors-utility-brand-utility-brand-400_alt: var(--component-colors-utility-gray-utility-gray-400);
  --component-colors-utility-brand-utility-brand-500: var(--colors-brand-500);
  --component-colors-utility-brand-utility-brand-500_alt: var(--component-colors-utility-gray-utility-gray-500);
  --component-colors-utility-brand-utility-brand-600: var(--colors-brand-400);
  --component-colors-utility-brand-utility-brand-600_alt: var(--component-colors-utility-gray-utility-gray-600);
  --component-colors-utility-brand-utility-brand-700: var(--colors-brand-300);
  --component-colors-utility-brand-utility-brand-700_alt: var(--component-colors-utility-gray-utility-gray-700);
  --component-colors-utility-brand-utility-brand-800: var(--colors-brand-200);
  --component-colors-utility-brand-utility-brand-800_alt: var(--component-colors-utility-gray-utility-gray-800);
  --component-colors-utility-brand-utility-brand-900: var(--colors-brand-100);
  --component-colors-utility-brand-utility-brand-900_alt: var(--component-colors-utility-gray-utility-gray-900);
  --component-colors-utility-error-utility-error-50: var(--colors-error-950);
  --component-colors-utility-error-utility-error-100: var(--colors-error-900);
  --component-colors-utility-error-utility-error-200: var(--colors-error-800);
  --component-colors-utility-error-utility-error-300: var(--colors-error-700);
  --component-colors-utility-error-utility-error-400: var(--colors-error-600);
  --component-colors-utility-error-utility-error-500: var(--colors-error-500);
  --component-colors-utility-error-utility-error-600: var(--colors-error-400);
  --component-colors-utility-error-utility-error-700: var(--colors-error-300);
  --component-colors-utility-warning-utility-warning-50: var(--colors-warning-950);
  --component-colors-utility-warning-utility-warning-100: var(--colors-warning-900);
  --component-colors-utility-warning-utility-warning-200: var(--colors-warning-800);
  --component-colors-utility-warning-utility-warning-300: var(--colors-warning-700);
  --component-colors-utility-warning-utility-warning-400: var(--colors-warning-600);
  --component-colors-utility-warning-utility-warning-500: var(--colors-warning-500);
  --component-colors-utility-warning-utility-warning-600: var(--colors-warning-400);
  --component-colors-utility-warning-utility-warning-700: var(--colors-warning-300);
  --component-colors-utility-success-utility-success-50: var(--colors-success-950);
  --component-colors-utility-success-utility-success-100: var(--colors-success-900);
  --component-colors-utility-success-utility-success-200: var(--colors-success-800);
  --component-colors-utility-success-utility-success-300: var(--colors-success-700);
  --component-colors-utility-success-utility-success-400: var(--colors-success-600);
  --component-colors-utility-success-utility-success-500: var(--colors-success-500);
  --component-colors-utility-success-utility-success-600: var(--colors-success-400);
  --component-colors-utility-success-utility-success-700: var(--colors-success-300);
  --component-colors-utility-gray-blue-utility-gray-blue-50: var(--colors-gray-blue-950);
  --component-colors-utility-gray-blue-utility-gray-blue-100: var(--colors-gray-blue-900);
  --component-colors-utility-gray-blue-utility-gray-blue-200: var(--colors-gray-blue-800);
  --component-colors-utility-gray-blue-utility-gray-blue-300: var(--colors-gray-blue-700);
  --component-colors-utility-gray-blue-utility-gray-blue-400: var(--colors-gray-blue-600);
  --component-colors-utility-gray-blue-utility-gray-blue-500: var(--colors-gray-blue-500);
  --component-colors-utility-gray-blue-utility-gray-blue-600: var(--colors-gray-blue-400);
  --component-colors-utility-gray-blue-utility-gray-blue-700: var(--colors-gray-blue-300);
  --component-colors-utility-green-utility-green-50: var(--colors-green-950);
  --component-colors-utility-green-utility-green-100: var(--colors-green-900);
  --component-colors-utility-green-utility-green-200: var(--colors-green-800);
  --component-colors-utility-green-utility-green-300: var(--colors-green-700);
  --component-colors-utility-green-utility-green-400: var(--colors-green-600);
  --component-colors-utility-green-utility-green-500: var(--colors-green-500);
  --component-colors-utility-green-utility-green-600: var(--colors-green-400);
  --component-colors-utility-green-utility-green-700: var(--colors-green-300);
  --component-colors-utility-blue-light-utility-blue-light-50: var(--colors-blue-light-950);
  --component-colors-utility-blue-light-utility-blue-light-100: var(--colors-blue-light-900);
  --component-colors-utility-blue-light-utility-blue-light-200: var(--colors-blue-light-800);
  --component-colors-utility-blue-light-utility-blue-light-300: var(--colors-blue-light-700);
  --component-colors-utility-blue-light-utility-blue-light-400: var(--colors-blue-light-600);
  --component-colors-utility-blue-light-utility-blue-light-500: var(--colors-blue-light-500);
  --component-colors-utility-blue-light-utility-blue-light-600: var(--colors-blue-light-400);
  --component-colors-utility-blue-light-utility-blue-light-700: var(--colors-blue-light-300);
  --component-colors-utility-blue-utility-blue-50: var(--colors-blue-950);
  --component-colors-utility-blue-utility-blue-100: var(--colors-blue-900);
  --component-colors-utility-blue-utility-blue-200: var(--colors-blue-800);
  --component-colors-utility-blue-utility-blue-300: var(--colors-blue-700);
  --component-colors-utility-blue-utility-blue-400: var(--colors-blue-600);
  --component-colors-utility-blue-utility-blue-500: var(--colors-blue-500);
  --component-colors-utility-blue-utility-blue-600: var(--colors-blue-400);
  --component-colors-utility-blue-utility-blue-700: var(--colors-blue-300);
  --component-colors-utility-blue-dark-utility-blue-dark-50: var(--colors-blue-dark-950);
  --component-colors-utility-blue-dark-utility-blue-dark-100: var(--colors-blue-dark-900);
  --component-colors-utility-blue-dark-utility-blue-dark-200: var(--colors-blue-dark-800);
  --component-colors-utility-blue-dark-utility-blue-dark-300: var(--colors-blue-dark-700);
  --component-colors-utility-blue-dark-utility-blue-dark-400: var(--colors-blue-dark-600);
  --component-colors-utility-blue-dark-utility-blue-dark-500: var(--colors-blue-dark-500);
  --component-colors-utility-blue-dark-utility-blue-dark-600: var(--colors-blue-dark-400);
  --component-colors-utility-blue-dark-utility-blue-dark-700: var(--colors-blue-dark-300);
  --component-colors-utility-indigo-utility-indigo-50: var(--colors-indigo-950);
  --component-colors-utility-indigo-utility-indigo-100: var(--colors-indigo-900);
  --component-colors-utility-indigo-utility-indigo-200: var(--colors-indigo-800);
  --component-colors-utility-indigo-utility-indigo-300: var(--colors-indigo-700);
  --component-colors-utility-indigo-utility-indigo-400: var(--colors-indigo-600);
  --component-colors-utility-indigo-utility-indigo-500: var(--colors-indigo-500);
  --component-colors-utility-indigo-utility-indigo-600: var(--colors-indigo-400);
  --component-colors-utility-indigo-utility-indigo-700: var(--colors-indigo-300);
  --component-colors-utility-purple-utility-purple-50: var(--colors-purple-950);
  --component-colors-utility-purple-utility-purple-100: var(--colors-purple-900);
  --component-colors-utility-purple-utility-purple-200: var(--colors-purple-800);
  --component-colors-utility-purple-utility-purple-300: var(--colors-purple-700);
  --component-colors-utility-purple-utility-purple-400: var(--colors-purple-600);
  --component-colors-utility-purple-utility-purple-500: var(--colors-purple-500);
  --component-colors-utility-purple-utility-purple-600: var(--colors-purple-400);
  --component-colors-utility-purple-utility-purple-700: var(--colors-purple-300);
  --component-colors-utility-fuchsia-utility-fuchsia-50: var(--colors-fuchsia-950);
  --component-colors-utility-fuchsia-utility-fuchsia-100: var(--colors-fuchsia-900);
  --component-colors-utility-fuchsia-utility-fuchsia-200: var(--colors-fuchsia-800);
  --component-colors-utility-fuchsia-utility-fuchsia-300: var(--colors-fuchsia-700);
  --component-colors-utility-fuchsia-utility-fuchsia-400: var(--colors-fuchsia-600);
  --component-colors-utility-fuchsia-utility-fuchsia-500: var(--colors-fuchsia-500);
  --component-colors-utility-fuchsia-utility-fuchsia-600: var(--colors-fuchsia-400);
  --component-colors-utility-fuchsia-utility-fuchsia-700: var(--colors-fuchsia-300);
  --component-colors-utility-pink-utility-pink-50: var(--colors-pink-950);
  --component-colors-utility-pink-utility-pink-100: var(--colors-pink-900);
  --component-colors-utility-pink-utility-pink-200: var(--colors-pink-800);
  --component-colors-utility-pink-utility-pink-300: var(--colors-pink-700);
  --component-colors-utility-pink-utility-pink-400: var(--colors-pink-600);
  --component-colors-utility-pink-utility-pink-500: var(--colors-pink-500);
  --component-colors-utility-pink-utility-pink-600: var(--colors-pink-400);
  --component-colors-utility-pink-utility-pink-700: var(--colors-pink-300);
  --component-colors-utility-orange-dark-utility-orange-dark-50: var(--colors-orange-dark-950);
  --component-colors-utility-orange-dark-utility-orange-dark-100: var(--colors-orange-dark-900);
  --component-colors-utility-orange-dark-utility-orange-dark-200: var(--colors-orange-dark-800);
  --component-colors-utility-orange-dark-utility-orange-dark-300: var(--colors-orange-dark-700);
  --component-colors-utility-orange-dark-utility-orange-dark-400: var(--colors-orange-dark-600);
  --component-colors-utility-orange-dark-utility-orange-dark-500: var(--colors-orange-dark-500);
  --component-colors-utility-orange-dark-utility-orange-dark-600: var(--colors-orange-dark-400);
  --component-colors-utility-orange-dark-utility-orange-dark-700: var(--colors-orange-dark-300);
  --component-colors-utility-orange-utility-orange-50: var(--colors-orange-950);
  --component-colors-utility-orange-utility-orange-100: var(--colors-orange-900);
  --component-colors-utility-orange-utility-orange-200: var(--colors-orange-800);
  --component-colors-utility-orange-utility-orange-300: var(--colors-orange-700);
  --component-colors-utility-orange-utility-orange-400: var(--colors-orange-600);
  --component-colors-utility-orange-utility-orange-500: var(--colors-orange-500);
  --component-colors-utility-orange-utility-orange-600: var(--colors-orange-400);
  --component-colors-utility-orange-utility-orange-700: var(--colors-orange-300);
  --colors-foreground-fg-secondary-700: var(--colors-gray-dark-mode-300);
  --colors-foreground-fg-secondary_hover: var(--colors-gray-dark-mode-200);
  --colors-foreground-fg-tertiary-600: var(--colors-gray-dark-mode-400);
  --colors-foreground-fg-tertiary_hover: var(--colors-gray-dark-mode-300);
  --colors-foreground-fg-quaternary-400: var(--colors-gray-dark-mode-600);
  --colors-foreground-fg-quaternary_hover: var(--colors-gray-dark-mode-500);
  --colors-foreground-fg-white: var(--colors-base-white);
  --colors-foreground-fg-disabled: var(--colors-gray-dark-mode-500);
  --colors-foreground-fg-disabled_subtle: var(--colors-gray-dark-mode-600);
  --colors-foreground-fg-brand-primary-600: var(--colors-brand-500);
  --colors-foreground-fg-brand-primary_alt: var(--colors-gray-dark-mode-300);
  --colors-foreground-fg-brand-secondary-500: var(--colors-brand-500);
  --colors-foreground-fg-brand-secondary_alt: var(--colors-gray-dark-mode-600);
  --colors-foreground-fg-brand-secondary_hover: var(--colors-gray-dark-mode-500);
  --colors-foreground-fg-error-primary: var(--colors-error-500);
  --colors-foreground-fg-error-secondary: var(--colors-error-400);
  --colors-foreground-fg-warning-primary: var(--colors-warning-500);
  --colors-foreground-fg-warning-secondary: var(--colors-warning-400);
  --colors-foreground-fg-success-primary: var(--colors-success-500);
  --colors-foreground-fg-success-secondary: var(--colors-success-400);
  --colors-background-bg-primary: var(--colors-gray-dark-mode-950);
  --colors-effects-focus-rings-focus-ring: var(--colors-brand-500);
  --colors-effects-focus-rings-focus-ring-error: var(--colors-error-500);
  --colors-effects-shadows-shadow-xs: var(--colors-base-transparent);
  --colors-effects-portfolio-mockups-shadow-main-centre-md: var(--colors-base-transparent);
  --colors-effects-portfolio-mockups-shadow-main-centre-lg: var(--colors-base-transparent);
  --colors-effects-portfolio-mockups-shadow-overlay-lg: var(--colors-base-transparent);
  --colors-effects-portfolio-mockups-shadow-grid-md: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-sm_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-sm_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-md_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-md_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-lg_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-lg_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-lg_03: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-xl_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-xl_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-xl_03: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-2xl_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-2xl_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-3xl_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-3xl_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-skeumorphic-inner: #0C0E120D;
  --colors-effects-shadows-shadow-skeumorphic-inner-border: #0C0E122E;
  --colors-background-bg-primary_alt: var(--colors-background-bg-secondary);
  --colors-background-bg-primary_hover: var(--colors-gray-dark-mode-800);
  --colors-background-bg-primary-solid: var(--colors-background-bg-secondary);
  --colors-background-bg-secondary: var(--colors-gray-dark-mode-900);
  --colors-background-bg-secondary_alt: var(--colors-background-bg-primary);
  --colors-background-bg-secondary_hover: var(--colors-gray-dark-mode-800);
  --colors-background-bg-secondary_subtle: var(--colors-gray-dark-mode-900);
  --colors-background-bg-secondary-solid: var(--colors-gray-dark-mode-600);
  --colors-background-bg-tertiary: var(--colors-gray-dark-mode-800);
  --colors-background-bg-quaternary: var(--colors-gray-dark-mode-700);
  --colors-background-bg-active: var(--colors-gray-dark-mode-800);
  --colors-background-bg-disabled: var(--colors-gray-dark-mode-800);
  --colors-background-bg-disabled_subtle: var(--colors-gray-dark-mode-900);
  --colors-background-bg-overlay: var(--colors-gray-dark-mode-800);
  --colors-background-bg-brand-primary: var(--colors-brand-500);
  --colors-background-bg-brand-primary_alt: var(--colors-background-bg-secondary);
  --colors-background-bg-brand-secondary: var(--colors-brand-600);
  --colors-background-bg-brand-solid: var(--colors-brand-600);
  --colors-background-bg-brand-solid_hover: var(--colors-brand-500);
  --colors-background-bg-brand-section: var(--colors-background-bg-secondary);
  --colors-background-bg-brand-section_subtle: var(--colors-background-bg-primary);
  --colors-background-bg-error-primary: var(--colors-error-950);
  --colors-background-bg-error-secondary: var(--colors-error-600);
  --colors-background-bg-error-solid: var(--colors-error-600);
  --colors-background-bg-error-solid_hover: var(--colors-error-500);
  --colors-background-bg-warning-primary: var(--colors-warning-950);
  --colors-background-bg-warning-secondary: var(--colors-warning-600);
  --colors-background-bg-warning-solid: var(--colors-warning-600);
  --colors-background-bg-success-primary: var(--colors-success-950);
  --colors-background-bg-success-secondary: var(--colors-success-600);
  --colors-background-bg-success-solid: var(--colors-success-600);
  --component-colors-utility-yellow-utility-yellow-50: var(--colors-yellow-950);
  --component-colors-utility-yellow-utility-yellow-100: var(--colors-yellow-900);
  --component-colors-utility-yellow-utility-yellow-200: var(--colors-yellow-800);
  --component-colors-utility-yellow-utility-yellow-300: var(--colors-yellow-700);
  --component-colors-utility-yellow-utility-yellow-400: var(--colors-yellow-600);
  --component-colors-utility-yellow-utility-yellow-500: var(--colors-yellow-500);
  --component-colors-utility-yellow-utility-yellow-600: var(--colors-yellow-400);
  --component-colors-utility-yellow-utility-yellow-700: var(--colors-yellow-300);
  --colors-background-black-white: #000000FF;
  --colors-text-text-primary: var(--colors-gray-50);
  --colors-text-text-primary_on-brand: var(--colors-gray-50);
  --colors-text-text-secondary: var(--colors-gray-300);
  --colors-text-text-secondary_hover: var(--colors-gray-200);
  --colors-text-text-secondary_on-brand: var(--colors-gray-300);
  --colors-text-text-tertiary: var(--colors-gray-400);
  --colors-text-text-tertiary_hover: var(--colors-gray-300);
  --colors-text-text-tertiary_on-brand: var(--colors-gray-400);
  --colors-text-text-quaternary: var(--colors-gray-400);
  --colors-text-text-quaternary_on-brand: var(--colors-gray-400);
  --colors-text-text-white: var(--colors-base-white);
  --colors-text-text-disabled: var(--colors-gray-500);
  --colors-text-text-placeholder: var(--colors-gray-500);
  --colors-text-text-placeholder_subtle: var(--colors-gray-700);
  --colors-text-text-brand-primary: var(--colors-gray-50);
  --colors-text-text-brand-secondary: var(--colors-gray-300);
  --colors-text-text-brand-tertiary: var(--colors-brand-500);
  --colors-text-text-brand-tertiary_alt: var(--colors-gray-50);
  --colors-text-text-error-primary: var(--colors-error-400);
  --colors-text-text-warning-primary: var(--colors-warning-400);
  --colors-text-text-success-primary: var(--colors-success-400);
  --colors-border-border-primary: var(--colors-gray-600);
  --colors-border-border-secondary: var(--colors-gray-800);
  --colors-border-border-tertiary: var(--colors-gray-800);
  --colors-border-border-disabled: var(--colors-gray-700);
  --colors-border-border-disabled_subtle: var(--colors-gray-800);
  --colors-border-border-brand: var(--colors-brand-400);
  --colors-border-border-brand_alt: var(--colors-gray-700);
  --colors-border-border-error: var(--colors-error-400);
  --colors-border-border-error_subtle: var(--colors-error-400);
  --colors-foreground-fg-primary: var(--colors-base-white);
  --component-colors-alpha-alpha-white-10: rgba(31, 31, 31, 0.10000000149011612);
  --component-colors-alpha-alpha-white-20: rgba(31, 31, 31, 0.20000000298023224);
  --component-colors-alpha-alpha-white-30: rgba(31, 31, 31, 0.30000001192092896);
  --component-colors-alpha-alpha-white-40: rgba(31, 31, 31, 0.4000000059604645);
  --component-colors-alpha-alpha-white-50: rgba(31, 31, 31, 0.5);
  --component-colors-alpha-alpha-white-60: rgba(31, 31, 31, 0.6000000238418579);
  --component-colors-alpha-alpha-white-70: rgba(31, 31, 31, 0.699999988079071);
  --component-colors-alpha-alpha-white-80: rgba(31, 31, 31, 0.800000011920929);
  --component-colors-alpha-alpha-white-90: rgba(31, 31, 31, 0.8999999761581421);
  --component-colors-alpha-alpha-white-100: var(--colors-gray-950);
  --component-colors-alpha-alpha-black-10: rgba(255, 255, 255, 0.10000000149011612);
  --component-colors-alpha-alpha-black-20: rgba(255, 255, 255, 0.20000000298023224);
  --component-colors-alpha-alpha-black-30: rgba(255, 255, 255, 0.30000001192092896);
  --component-colors-alpha-alpha-black-40: rgba(255, 255, 255, 0.4000000059604645);
  --component-colors-alpha-alpha-black-50: rgba(255, 255, 255, 0.5);
  --component-colors-alpha-alpha-black-60: rgba(255, 255, 255, 0.6000000238418579);
  --component-colors-alpha-alpha-black-70: rgba(255, 255, 255, 0.699999988079071);
  --component-colors-alpha-alpha-black-80: rgba(255, 255, 255, 0.800000011920929);
  --component-colors-alpha-alpha-black-90: rgba(255, 255, 255, 0.8999999761581421);
  --component-colors-alpha-alpha-black-100: rgba(255, 255, 255, 1);
  --component-colors-utility-gray-utility-gray-50: var(--colors-gray-dark-mode-900);
  --component-colors-components-app-store-badges-app-store-badge-border: var(--colors-base-white);
  --component-colors-components-application-navigation-nav-item-button-icon-fg: var(--colors-gray-400);
  --component-colors-components-application-navigation-nav-item-button-icon-fg_active: var(--colors-gray-200);
  --component-colors-components-application-navigation-nav-item-icon-fg: var(--colors-gray-400);
  --component-colors-components-application-navigation-nav-item-icon-fg_active: var(--colors-gray-200);
  --component-colors-components-avatars-avatar-bg: var(--colors-gray-800);
  --component-colors-components-avatars-avatar-profile-photo-border: var(--colors-gray-950);
  --component-colors-components-avatars-avatar-contrast-border: rgba(255, 255, 255, 0.11999999731779099);
  --component-colors-components-avatars-avatar-styles-bg-neutral: rgba(224, 224, 224, 1);
  --component-colors-components-breadcrumbs-breadcrumb-fg: var(--colors-gray-300);
  --component-colors-components-breadcrumbs-breadcrumb-fg_hover: var(--colors-base-white);
  --component-colors-components-breadcrumbs-breadcrumb-bg_hover: var(--colors-gray-800);
  --component-colors-components-breadcrumbs-breadcrumb-brand-fg_hover: var(--colors-base-white);
  --component-colors-components-breadcrumbs-breadcrumb-brand-bg_hover: var(--colors-gray-800);
  --component-colors-components-breadcrumbs-breadcrumb-icon-fg: var(--colors-gray-400);
  --component-colors-components-breadcrumbs-breadcrumb-icon-fg_hover: var(--colors-base-white);
  --component-colors-components-breadcrumbs-breadcrumb-brand-icon-fg_hover: var(--colors-base-white);
  --component-colors-components-buttons-primary-button-primary-fg: var(--colors-base-white);
  --component-colors-components-buttons-primary-button-primary-fg_hover: var(--colors-base-white);
  --component-colors-components-buttons-primary-button-primary-bg: var(--colors-brand-500);
  --component-colors-components-buttons-primary-button-primary-bg_hover: var(--colors-brand-400);
  --component-colors-components-buttons-secondary-button-secondary-fg: var(--colors-gray-300);
  --component-colors-components-buttons-secondary-button-secondary-fg_hover: var(--colors-gray-100);
  --component-colors-components-buttons-secondary-button-secondary-bg: var(--colors-gray-900);
  --component-colors-components-buttons-secondary-button-secondary-bg_hover: var(--colors-gray-800);
  --component-colors-components-buttons-secondary-button-secondary-border: var(--colors-gray-700);
  --component-colors-components-buttons-secondary-button-secondary-border_hover: var(--colors-gray-700);
  --component-colors-components-buttons-secondary-color-button-secondary-color-fg: var(--colors-gray-300);
  --component-colors-components-buttons-secondary-color-button-secondary-color-fg_hover: var(--colors-gray-100);
  --component-colors-components-buttons-secondary-color-button-secondary-color-bg: var(--colors-gray-900);
  --component-colors-components-buttons-secondary-color-button-secondary-color-bg_hover: var(--colors-gray-800);
  --component-colors-components-buttons-secondary-color-button-secondary-color-border: var(--colors-gray-700);
  --component-colors-components-buttons-secondary-color-button-secondary-color-border_hover: var(--colors-gray-700);
  --component-colors-components-buttons-tertiary-button-tertiary-fg: var(--colors-gray-400);
  --component-colors-components-buttons-tertiary-button-tertiary-fg_hover: var(--colors-gray-200);
  --component-colors-components-buttons-tertiary-button-tertiary-bg_hover: var(--colors-gray-800);
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg: var(--colors-gray-300);
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg_hover: var(--colors-gray-100);
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-bg_hover: var(--colors-gray-800);
  --component-colors-components-buttons-primary-error-button-primary-error-fg: var(--colors-base-white);
  --component-colors-components-buttons-primary-error-button-primary-error-fg_hover: var(--colors-base-white);
  --component-colors-components-buttons-primary-error-button-primary-error-bg: var(--colors-error-500);
  --component-colors-components-buttons-primary-error-button-primary-error-bg_hover: var(--colors-error-600);
  --component-colors-components-buttons-secondary-error-button-secondary-error-fg: var(--colors-error-200);
  --component-colors-components-buttons-secondary-error-button-secondary-error-fg_hover: var(--colors-error-100);
  --component-colors-components-buttons-secondary-error-button-secondary-error-bg: var(--colors-error-950);
  --component-colors-components-buttons-secondary-error-button-secondary-error-bg_hover: var(--colors-error-900);
  --component-colors-components-buttons-secondary-error-button-secondary-error-border: var(--colors-error-800);
  --component-colors-components-buttons-secondary-error-button-secondary-error-border_hover: var(--colors-error-700);
  --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg: var(--colors-error-300);
  --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg_hover: var(--colors-error-200);
  --component-colors-components-buttons-tertiary-error-button-tertiary-error-bg_hover: var(--colors-error-900);
  --component-colors-components-footers-footer-button-fg: var(--colors-gray-300);
  --component-colors-components-footers-footer-button-fg_hover: var(--colors-gray-100);
  --component-colors-components-footers-footer-badge-fg: var(--colors-base-white);
  --component-colors-components-footers-footer-badge-bg: rgba(255, 255, 255, 0.10000000149011612);
  --component-colors-components-footers-footer-badge-border: rgba(255, 255, 255, 0.30000001192092896);
  --component-colors-components-header-sections-header-abstract-50-bg: var(--colors-gray-900);
  --component-colors-components-header-sections-header-abstract-100-bg: var(--colors-gray-800);
  --component-colors-components-header-sections-header-abstract-200-bg: var(--colors-gray-700);
  --component-colors-components-header-sections-header-abstract-300-bg: var(--colors-gray-600);
  --component-colors-components-icons-icons-icon-fg-brand: var(--colors-gray-400);
  --component-colors-components-icons-icons-icon-fg-brand_on-brand: var(--colors-gray-400);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-brand: var(--colors-brand-200);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-gray: var(--colors-gray-200);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-error: var(--colors-error-200);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-warning: var(--colors-warning-200);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-success: var(--colors-success-200);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: var(--colors-brand-200);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-gray: var(--colors-gray-200);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-error: var(--colors-error-200);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-warning: var(--colors-warning-200);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-success: var(--colors-success-200);
  --component-colors-components-icons-featured-icons-modern-featured-icon-modern-border: var(--colors-gray-700);
  --component-colors-components-icons-social-icons-social-icon-fg-x: var(--colors-base-white);
  --component-colors-components-icons-social-icons-social-icon-fg-instagram: var(--colors-base-white);
  --component-colors-components-icons-social-icons-social-icon-fg-apple: var(--colors-base-white);
  --component-colors-components-icons-social-icons-social-icon-fg-github: var(--colors-base-white);
  --component-colors-components-icons-social-icons-social-icon-fg-angellist: var(--colors-base-white);
  --component-colors-components-icons-social-icons-social-icon-fg-tumblr: var(--colors-base-white);
  --component-colors-components-mockups-screen-mockup-border: var(--colors-gray-700);
  --component-colors-components-sliders-slider-handle-bg: var(--colors-foreground-fg-brand-primary);
  --component-colors-components-sliders-slider-handle-border: var(--colors-background-bg-primary);
  --component-colors-components-thumbnail-thumbnail-badge-brand-fg: var(--colors-gray-300);
  --component-colors-components-thumbnail-thumbnail-badge-success-fg: var(--colors-gray-300);
  --component-colors-components-toggles-toggle-button-fg_disabled: var(--colors-gray-600);
  --component-colors-components-tooltips-tooltip-supporting-text: var(--colors-gray-300);
  --component-colors-components-wysiwyg-editor-wysiwyg-editor-icon-fg: var(--colors-gray-400);
  --component-colors-components-wysiwyg-editor-wysiwyg-editor-icon-fg_active: var(--colors-base-white);
  --component-colors-utility-gray-utility-gray-100: var(--colors-gray-800);
  --component-colors-utility-gray-utility-gray-200: var(--colors-gray-700);
  --component-colors-utility-gray-utility-gray-300: var(--colors-gray-700);
  --component-colors-utility-gray-utility-gray-400: var(--colors-gray-600);
  --component-colors-utility-gray-utility-gray-500: var(--colors-gray-500);
  --component-colors-utility-gray-utility-gray-600: var(--colors-gray-400);
  --component-colors-utility-gray-utility-gray-700: var(--colors-gray-300);
  --component-colors-utility-gray-utility-gray-800: var(--colors-gray-200);
  --component-colors-utility-gray-utility-gray-900: var(--colors-gray-100);
  --component-colors-utility-brand-utility-brand-50: var(--colors-brand-950);
  --component-colors-utility-brand-utility-brand-50_alt: var(--component-colors-utility-gray-utility-gray-50);
  --component-colors-utility-brand-utility-brand-100: var(--colors-brand-900);
  --component-colors-utility-brand-utility-brand-100_alt: var(--component-colors-utility-gray-utility-gray-100);
  --component-colors-utility-brand-utility-brand-200: var(--colors-brand-800);
  --component-colors-utility-brand-utility-brand-200_alt: var(--component-colors-utility-gray-utility-gray-200);
  --component-colors-utility-brand-utility-brand-300: var(--colors-brand-700);
  --component-colors-utility-brand-utility-brand-300_alt: var(--component-colors-utility-gray-utility-gray-300);
  --component-colors-utility-brand-utility-brand-400: var(--colors-brand-600);
  --component-colors-utility-brand-utility-brand-400_alt: var(--component-colors-utility-gray-utility-gray-400);
  --component-colors-utility-brand-utility-brand-500: var(--colors-brand-500);
  --component-colors-utility-brand-utility-brand-500_alt: var(--component-colors-utility-gray-utility-gray-500);
  --component-colors-utility-brand-utility-brand-600: var(--colors-brand-400);
  --component-colors-utility-brand-utility-brand-600_alt: var(--component-colors-utility-gray-utility-gray-600);
  --component-colors-utility-brand-utility-brand-700: var(--colors-brand-300);
  --component-colors-utility-brand-utility-brand-700_alt: var(--component-colors-utility-gray-utility-gray-700);
  --component-colors-utility-brand-utility-brand-800: var(--colors-brand-200);
  --component-colors-utility-brand-utility-brand-800_alt: var(--component-colors-utility-gray-utility-gray-800);
  --component-colors-utility-brand-utility-brand-900: var(--colors-brand-100);
  --component-colors-utility-brand-utility-brand-900_alt: var(--component-colors-utility-gray-utility-gray-900);
  --component-colors-utility-error-utility-error-50: var(--colors-error-950);
  --component-colors-utility-error-utility-error-100: var(--colors-error-900);
  --component-colors-utility-error-utility-error-200: var(--colors-error-800);
  --component-colors-utility-error-utility-error-300: var(--colors-error-700);
  --component-colors-utility-error-utility-error-400: var(--colors-error-600);
  --component-colors-utility-error-utility-error-500: var(--colors-error-500);
  --component-colors-utility-error-utility-error-600: var(--colors-error-400);
  --component-colors-utility-error-utility-error-700: var(--colors-error-300);
  --component-colors-utility-warning-utility-warning-50: var(--colors-warning-950);
  --component-colors-utility-warning-utility-warning-100: var(--colors-warning-900);
  --component-colors-utility-warning-utility-warning-200: var(--colors-warning-800);
  --component-colors-utility-warning-utility-warning-300: var(--colors-warning-700);
  --component-colors-utility-warning-utility-warning-400: var(--colors-warning-600);
  --component-colors-utility-warning-utility-warning-500: var(--colors-warning-500);
  --component-colors-utility-warning-utility-warning-600: var(--colors-warning-400);
  --component-colors-utility-warning-utility-warning-700: var(--colors-warning-300);
  --component-colors-utility-success-utility-success-50: var(--colors-success-950);
  --component-colors-utility-success-utility-success-100: var(--colors-success-900);
  --component-colors-utility-success-utility-success-200: var(--colors-success-800);
  --component-colors-utility-success-utility-success-300: var(--colors-success-700);
  --component-colors-utility-success-utility-success-400: var(--colors-success-600);
  --component-colors-utility-success-utility-success-500: var(--colors-success-500);
  --component-colors-utility-success-utility-success-600: var(--colors-success-400);
  --component-colors-utility-success-utility-success-700: var(--colors-success-300);
  --colors-foreground-fg-secondary: var(--colors-gray-300);
  --colors-foreground-fg-secondary_hover: var(--colors-gray-200);
  --colors-foreground-fg-tertiary: var(--colors-gray-400);
  --colors-foreground-fg-tertiary_hover: var(--colors-gray-300);
  --colors-foreground-fg-quaternary: var(--colors-gray-400);
  --colors-foreground-fg-quaternary_hover: var(--colors-gray-300);
  --colors-foreground-fg-quinary: var(--colors-gray-500);
  --colors-foreground-fg-quinary_hover: var(--colors-gray-400);
  --colors-foreground-fg-senary: var(--colors-gray-600);
  --colors-foreground-fg-white: var(--colors-base-white);
  --colors-foreground-fg-disabled: var(--colors-gray-500);
  --colors-foreground-fg-disabled_subtle: var(--colors-gray-600);
  --colors-foreground-fg-brand-primary: var(--colors-brand-500);
  --colors-foreground-fg-brand-primary_alt: var(--colors-gray-300);
  --colors-foreground-fg-brand-secondary: var(--colors-brand-400);
  --colors-foreground-fg-error-primary: var(--colors-error-500);
  --colors-foreground-fg-error-secondary: var(--colors-error-400);
  --colors-foreground-fg-warning-primary: var(--colors-warning-500);
  --colors-foreground-fg-warning-secondary: var(--colors-warning-400);
  --colors-foreground-fg-success-primary: var(--colors-success-500);
  --colors-foreground-fg-success-secondary: var(--colors-success-400);
  --colors-background-bg-primary: var(--colors-gray-950);
  --colors-effects-focus-rings-focus-ring: var(--colors-brand-500);
  --colors-effects-focus-rings-focus-ring-error: var(--colors-error-500);
  --colors-effects-shadows-shadow-xs: var(--colors-base-transparent);
  --colors-effects-portfolio-mockups-shadow-main-centre-md: var(--colors-base-transparent);
  --colors-effects-portfolio-mockups-shadow-main-centre-lg: var(--colors-base-transparent);
  --colors-effects-portfolio-mockups-shadow-overlay-lg: var(--colors-base-transparent);
  --colors-effects-portfolio-mockups-shadow-grid-md: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-sm_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-sm_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-md_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-md_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-lg_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-lg_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-xl_01: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-xl_02: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-2xl: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-3xl: var(--colors-base-transparent);
  --colors-effects-shadows-shadow-skeumorphic-inner: rgba(31, 31, 31, 0.05000000074505806);
  --colors-effects-shadows-shadow-skeumorphic-inner-border: rgba(31, 31, 31, 0.18000000715255737);
  --colors-background-bg-primary_alt: var(--colors-background-bg-secondary);
  --colors-background-bg-primary_hover: var(--colors-gray-800);
  --colors-background-bg-primary-solid: var(--colors-background-bg-secondary);
  --colors-background-bg-secondary: var(--colors-gray-dark-mode-900);
  --colors-background-bg-secondary_alt: var(--colors-background-bg-primary);
  --colors-background-bg-secondary_hover: var(--colors-gray-800);
  --colors-background-bg-secondary_subtle: var(--colors-gray-900);
  --colors-background-bg-secondary-solid: var(--colors-gray-600);
  --colors-background-bg-tertiary: var(--colors-gray-800);
  --colors-background-bg-quaternary: var(--colors-gray-700);
  --colors-background-bg-active: var(--colors-gray-800);
  --colors-background-bg-disabled: var(--colors-gray-800);
  --colors-background-bg-disabled_subtle: var(--colors-gray-900);
  --colors-background-bg-overlay: rgba(0, 0, 0, 0.5);
  --colors-background-bg-brand-primary: var(--colors-brand-400);
  --colors-background-bg-brand-primary_alt: var(--colors-background-bg-secondary);
  --colors-background-bg-brand-secondary: var(--colors-brand-500);
  --colors-background-bg-brand-solid: var(--colors-brand-500);
  --colors-background-bg-brand-solid_hover: var(--colors-brand-700);
  --colors-background-bg-brand-section: var(--colors-background-bg-secondary);
  --colors-background-bg-brand-section_subtle: var(--colors-background-bg-primary);
  --colors-background-bg-error-primary: var(--colors-error-500);
  --colors-background-bg-error-secondary: var(--colors-error-600);
  --colors-background-bg-error-solid: var(--colors-error-600);
  --colors-background-bg-warning-primary: var(--colors-warning-500);
  --colors-background-bg-warning-secondary: var(--colors-warning-600);
  --colors-background-bg-warning-solid: var(--colors-warning-600);
  --colors-background-bg-success-primary: var(--colors-success-500);
  --colors-background-bg-success-secondary: var(--colors-success-600);
  --colors-background-bg-success-solid: var(--colors-success-600);
  --colors-foreground-fg-brand-primary-500: var(--colors-base-white);
  --colors-background-bg-main: #292929;
  --custom-button-gray-border: #737373;
}

.light-mode {
  --text-color: #292929;
  --text-color-second: #292929;
  --text-color-second-dark: #8c8c8c;
  --icon-color: rgba(140, 140, 140, 1);
  --icon-color-light: #000000;
  --bg-color-rgb-consts: 255, 255, 255;
  --bg-color: rgb(var(--bg-color-rgb-consts));
  --layout-bg-color: rgb(230, 230, 230);
  --bg-color-second-rgb-consts: 247, 247, 247;
  --bg-color-second: rgb(var(--bg-color-second-rgb-consts));
  --border-color-light: #E6E6E6;
  --border-color: #292929;
  --bg-hover-color: #E6E6E6;
  --button-secondary-bg: #F0F0F0;
  --section-border: 1px solid var(--border-color-light);
  --border: 1px solid #CCC;
  --header-border: 1px solid #CCC;
  --mobile-menu-bg-color: rgba(var(--bg-color-rgb-consts), 0.9);
  --box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
  --tag-bg: #E6E6E6;
  --popup-bg-color: #fff;
  --popup-contrast-color: #E6E6E6;
  --popup-hover-color: #F2F2F2 ;
}

.light-mode {
  /* 1. colors */
  --background-bg-primary: var(--colors-base-white);
  --background-bg-secondary: var(--colors-gray-1);
  --background-bg-primary_hover: var(--colors-gray-1);
  --background-bg-secondary_hover: var(--colors-gray-2);
  --background-bg-tertiary: var(--colors-gray-2);
  --background-bg-tertiary_hover: var(--colors-gray-3);
  --background-bg-brand-solid: var(--colors-brand-5);
  --text-text-primary: var(--colors-gray-7);
  --text-text-secondary: var(--colors-gray-6);
  --text-text-tertiary: var(--colors-gray-5);
  --text-text-white: var(--colors-base-white);
  --button-primary-button-primary-bg: var(--colors-brand-5);
  --button-primary-button-primary-bg_hover: var(--colors-brand-4);
  --button-primary-button-primary-text: var(--text-text-white);
  --foreground-fg-white: var(--colors-base-white);
  --border-border-brand: var(--colors-brand-4);
  --border-border-brand-subtle: var(--colors-brand-3);
  --foreground-fg-primary: var(--colors-gray-6);
  --foreground-fg-secondary: var(--colors-gray-5);
  --foreground-fg-tertiary: var(--colors-gray-4);
  --text-text-disabled: var(--colors-gray-2);
  --text-text-placeholder: var(--colors-gray-3);
  --border-border-primary: var(--colors-gray-4);
  --border-border-secondary: var(--colors-gray-3);
  --button-link-brand-button-link-brand-color: var(--colors-brand-5);
  --button-link-brand-button-link-brand-color-fg: var(--colors-brand-5);
  --button-link-brand-button-link-brand-color_hover: var(--colors-brand-6);
  --foreground-fg-disabled: var(--colors-gray-3);
  --button-link-gray-button-link-gray-color: var(--colors-gray-5);
  --button-link-gray-button-link-gray-color_hover: var(--colors-brand-5);
  --button-link-gray-button-link-gray-color-fg: var(--colors-gray-5);
  --button-secondary-outline-brand-button-secondary-brand-border: var(--colors-brand-5);
  --button-secondary-outline-brand-button-secondary-brand-border_hover: var(--colors-brand-4);
  --button-secondary-outline-brand-button-secondary-brand-text: var(--colors-brand-5);
  --button-secondary-outline-brand-button-secondary-brand-text_hover: var(--colors-brand-4);
  --button-secondary-outline-brand-button-secondary-brand-fg: var(--colors-brand-5);
  --button-secondary-outline-brand-button-secondary-brand-fg_hover: var(--colors-brand-4);
  --background-bg-disabled: var(--colors-gray-1);
  --border-border-disabled: var(--colors-gray-2);
  --button-secondary-outline-negative-button-secondary-negative-border: var(--colors-gray-5);
  --button-secondary-outline-negative-button-secondary-negative-border_hover: var(--colors-brand-5);
  --button-secondary-outline-negative-button-secondary-negative-text: var(--colors-gray-5);
  --button-secondary-outline-negative-button-secondary-negative-text_hover: var(--colors-brand-5);
  --button-secondary-outline-negative-button-secondary-negative-fg: var(--colors-gray-5);
  --button-secondary-outline-negative-button-secondary-negative-fg_hover: var(--colors-brand-5);
  --border-border-brand-solid: var(--colors-brand-5);
  --badge-gray-badge-gray-bg: var(--background-bg-tertiary);
  --badge-gray-badge-gray-text: var(--colors-gray-5);
  --badge-gray-badge-gray-fg: var(--colors-gray-4);
  --background-bg-error-solid: var(--colors-error-5);
  --button-secondary-filled-button-secondary-filled-bg: var(--colors-gray-5);
  --button-secondary-filled-button-secondary-filled-bg_hover: var(--colors-gray-6);
  --button-secondary-filled-button-secondary-filled-text: var(--text-text-white);
  --button-primary-success-button-primary-success-bg: var(--colors-success-5);
  --button-primary-success-button-primary-success-bg_hover: var(--colors-success-4);
  --button-primary-success-button-primary-success-text: var(--text-text-white);
  --background-bg-warning-solid: var(--colors-warning-5);
  --background-bg-success-solid: var(--colors-success-5);
  --button-secondary-outline-gray-button-secondary-gray-border: var(--colors-gray-2);
  --button-secondary-outline-gray-button-secondary-gray-border_hover: var(--colors-brand-5);
  --button-secondary-outline-gray-button-secondary-gray-text: var(--colors-gray-5);
  --button-secondary-outline-gray-button-secondary-gray-text_hover: var(--colors-brand-5);
  --button-secondary-outline-gray-button-secondary-gray-fg: var(--colors-gray-5);
  --button-secondary-outline-gray-button-secondary-gray-fg_hover: var(--colors-brand-5);
  --foreground-fg-disabled-subtle: var(--colors-gray-2);
  --text-text-quarternary: var(--colors-gray-4);
  --text-text-error-primary: var(--colors-error-5);
  --border-border-error: var(--colors-error-5);
  --text-text-quinary: var(--colors-gray-3);
  --foreground-fg-brand-primary: var(--colors-brand-5);
  --background-bg-brand-primary: var(--colors-brand-1);
  --text-text-error-secondary: var(--colors-error-4);
  --text-text-brand-primary: var(--colors-brand-5);
  --text-text-brand-secondary: var(--colors-brand-4);
  --background-bg-brand-secondary: var(--colors-brand-2);
  --foreground-fg-success-primary: var(--colors-success-5);
  --foreground-fg-success-secondary: var(--colors-success-4);
  --background-bg-success-primary: var(--colors-success-1);
  --background-bg-success-secondary: var(--colors-success-2);
  --background-bg-error-primary: var(--colors-error-1);
  --background-bg-error-secondary: var(--colors-error-2);
  --foreground-fg-error-primary: var(--colors-error-5);
  --foreground-fg-error-secondary: var(--colors-error-4);
  --badge-brand-badge-brand-bg: var(--background-bg-brand-primary);
  --badge-brand-badge-brand-text: var(--colors-brand-5);
  --badge-brand-badge-brand-fg: var(--colors-brand-4);
  --border-border-tertiary: var(--colors-gray-2);
  --badge-error-badge-error-bg: var(--background-bg-error-primary);
  --badge-error-badge-error-text: var(--text-text-error-secondary);
  --badge-error-badge-error-fg: var(--text-text-error-secondary);
  --button-primary-error-button-primary-error-bg: var(--colors-error-5);
  --button-primary-error-button-primary-error-bg_hover: var(--colors-error-4);
  --button-primary-error-button-primary-error-text: var(--text-text-white);
  --button-secondary-outline-error-button-secondary-error-border: var(--colors-error-5);
  --button-secondary-outline-error-button-secondary-error-border_hover: var(--colors-error-4);
  --button-secondary-outline-error-button-secondary-error-text: var(--colors-error-5);
  --button-secondary-outline-error-button-secondary-error-text_hover: var(--colors-error-4);
  --button-secondary-outline-error-button-secondary-error-fg: var(--colors-error-5);
  --button-secondary-outline-error-button-secondary-error-fg_hover: var(--colors-error-4);
  --button-link-error-button-link-error-color: var(--colors-error-5);
  --button-link-error-button-link-error-color_hover: var(--colors-error-6);
  --button-link-error-button-link-error-color-fg: var(--colors-error-5);
  --input-input-bg: var(--background-bg-primary);
  --input-input-border: #cccccc;
  --input-input-border_focus: var(--border-border-brand-solid);
  --input-input-border_hover: var(--border-border-primary);
  --input-input-text: var(--border-border-secondary);
  --input-input-text-filled: var(--text-text-primary);
  --input-input-text-error: var(--text-text-error-secondary);
  --foreground-fg-brand-secondary: var(--colors-brand-4);
  --foreground-fg-warning-primary: var(--colors-warning-5);
  --foreground-fg-warning-secondary: var(--colors-warning-4);
  --text-text-success-primary: var(--colors-success-5);
  --text-text-success-secondary: var(--colors-success-4);
  --text-text-warning-primary: var(--colors-warning-5);
  --text-text-warning-secondary: var(--colors-warning-4);
  --text-text-senary: var(--colors-gray-2);
  --background-bg-white: var(--colors-base-white);
  --background-bg-quarterary: var(--colors-gray-3);
  --background-bg-quarterary_hover: var(--colors-gray-4);
  --colors-text-text-primary-900: #313131;
  --button-secondary-bg2: #FFFFFF;
  --button-secondary-border: #D2D2D2;
  --button-secondary-fg: #525252;
  --colors-background-bg-quaternary: #EDEDED;
  --colors-foreground-fg-secondary-700: #525252;
  --colors-border-border-secondary: #E6E6E6;
  --colors-border-border-primary: #D2D2D2;
  --colors-foreground-fg-tertiary-600: #6A6A6A;
  --colors-text-text-secondary-700: #525252;
  --colors-foreground-fg-quinary-400: #8C8C8C;
  --colors-background-bg-primary_alt: #FFF;
  --colors-foreground-fg-primary-900: #313131;
  --colors-background-bg-disabled: #F7F7F7;
  --colors-border-border-disabled_subtle: #EDEDED;
  --colors-foreground-fg-disabled: #8C8C8C;
  --component-colors-utility-gray-utility-gray-200: #EDEDED;
  --component-colors-utility-gray-utility-gray-50: #FBFBFB;
  --component-colors-utility-gray-utility-gray-700: #525252;
  --colors-effects-shadows-shadow-lg_01: rgba(31, 31, 31, 0.08);
  --colors-effects-shadows-shadow-lg_02: rgba(31, 31, 31, 0.03);
}

/* 1. Color modes - Light mode */
.light-mode {
  --colors-text-text-primary-900: var(--colors-base-black);
  --colors-text-text-primary_on-brand: var(--colors-base-white);
  --colors-text-text-secondary-700: var(--colors-gray-light-mode-700);
  --colors-text-text-secondary_hover: var(--colors-gray-light-mode-800);
  --colors-text-text-secondary_on-brand: var(--colors-brand-200);
  --colors-text-text-tertiary-600: var(--colors-gray-light-mode-600);
  --colors-text-text-tertiary_hover: var(--colors-gray-light-mode-700);
  --colors-text-text-tertiary_on-brand: var(--colors-brand-200);
  --colors-text-text-quaternary-500: var(--colors-gray-light-mode-500);
  --colors-text-text-quaternary_on-brand: var(--colors-brand-300);
  --colors-text-text-white: var(--colors-base-white);
  --colors-text-text-disabled: var(--colors-gray-light-mode-500);
  --colors-text-text-placeholder: var(--colors-gray-light-mode-500);
  --colors-text-text-placeholder_subtle: var(--colors-gray-light-mode-300);
  --colors-text-text-brand-primary-900: var(--colors-brand-900);
  --colors-text-text-brand-secondary-700: var(--colors-brand-700);
  --colors-text-text-brand-secondary_hover: var(--colors-brand-800);
  --colors-text-text-brand-tertiary-600: var(--colors-brand-600);
  --colors-text-text-brand-tertiary_alt: var(--colors-brand-600);
  --colors-text-text-error-primary-600: var(--colors-error-600);
  --colors-text-text-error-primary_hover: var(--colors-error-700);
  --colors-text-text-warning-primary-600: var(--colors-warning-600);
  --colors-text-text-success-primary-600: var(--colors-success-600);
  --colors-border-border-primary: var(--colors-gray-light-mode-300);
  --colors-border-border-secondary: var(--colors-gray-light-mode-200);
  --colors-border-border-secondary_alt: #00000014;
  --colors-border-border-tertiary: var(--colors-gray-light-mode-100);
  --colors-border-border-disabled: var(--colors-gray-light-mode-300);
  --colors-border-border-disabled_subtle: var(--colors-gray-light-mode-200);
  --colors-border-border-brand: var(--colors-brand-500);
  --colors-border-border-brand_alt: var(--colors-brand-600);
  --colors-border-border-error: var(--colors-error-500);
  --colors-border-border-error_subtle: var(--colors-error-300);
  --colors-foreground-fg-primary-900: var(--colors-gray-light-mode-900);
  --component-colors-alpha-alpha-white-10: #FFFFFF1A;
  --component-colors-alpha-alpha-white-20: #FFFFFF33;
  --component-colors-alpha-alpha-white-30: #FFFFFF4D;
  --component-colors-alpha-alpha-white-40: #FFFFFF66;
  --component-colors-alpha-alpha-white-50: #FFFFFF80;
  --component-colors-alpha-alpha-white-60: #FFFFFF99;
  --component-colors-alpha-alpha-white-70: #FFFFFFB2;
  --component-colors-alpha-alpha-white-80: #FFFFFFCC;
  --component-colors-alpha-alpha-white-90: #FFFFFFE5;
  --component-colors-alpha-alpha-white-100: #FFFFFFFF;
  --component-colors-alpha-alpha-black-10: #0000001A;
  --component-colors-alpha-alpha-black-20: #00000033;
  --component-colors-alpha-alpha-black-30: #0000004D;
  --component-colors-alpha-alpha-black-40: #00000066;
  --component-colors-alpha-alpha-black-50: #00000080;
  --component-colors-alpha-alpha-black-60: #00000099;
  --component-colors-alpha-alpha-black-70: #000000B2;
  --component-colors-alpha-alpha-black-80: #000000CC;
  --component-colors-alpha-alpha-black-90: #000000E5;
  --component-colors-alpha-alpha-black-100: #000000FF;
  --component-colors-utility-gray-utility-gray-50: var(--colors-gray-light-mode-50);
  --component-colors-components-app-store-badges-app-store-badge-border: #A6A6A6FF;
  --component-colors-components-avatars-avatar-styles-bg-neutral: #E0E0E0FF;
  --component-colors-components-buttons-button-primary-icon: var(--colors-brand-300);
  --component-colors-components-buttons-button-primary-icon_hover: var(--colors-brand-200);
  --component-colors-components-buttons-button-destructive-primary-icon: var(--colors-error-300);
  --component-colors-components-buttons-button-destructive-primary-icon_hover: var(--colors-error-200);
  --component-colors-components-footers-footer-button-fg: var(--colors-brand-200);
  --component-colors-components-footers-footer-button-fg_hover: var(--colors-base-white);
  --component-colors-components-icons-icons-icon-fg-brand: var(--colors-brand-600);
  --component-colors-components-icons-icons-icon-fg-brand_on-brand: var(--colors-brand-200);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: var(--colors-brand-600);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-gray: var(--colors-gray-light-mode-500);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-error: var(--colors-error-600);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-warning: var(--colors-warning-600);
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-success: var(--colors-success-600);
  --component-colors-components-mockups-screen-mockup-border: var(--colors-gray-light-mode-900);
  --component-colors-components-sliders-slider-handle-bg: var(--colors-base-white);
  --component-colors-components-sliders-slider-handle-border: var(--colors-brand-600);
  --component-colors-components-toggles-toggle-button-fg_disabled: var(--colors-gray-light-mode-50);
  --component-colors-components-toggles-toggle-border: var(--colors-gray-light-mode-300);
  --component-colors-components-toggles-toggle-slim-border_pressed: var(--colors-background-bg-brand-solid);
  --component-colors-components-toggles-toggle-slim-border_pressed-hover: var(--colors-background-bg-brand-solid_hover);
  --component-colors-components-Tooltips-tooltip-supporting-text: var(--colors-gray-light-mode-300);
  --component-colors-components-text-editor-text-editor-icon-fg: var(--colors-gray-light-mode-400);
  --component-colors-components-text-editor-text-editor-icon-fg_active: var(--colors-gray-light-mode-500);
  --component-colors-utility-gray-utility-gray-100: var(--colors-gray-light-mode-100);
  --component-colors-utility-gray-utility-gray-200: var(--colors-gray-light-mode-200);
  --component-colors-utility-gray-utility-gray-300: var(--colors-gray-light-mode-300);
  --component-colors-utility-gray-utility-gray-400: var(--colors-gray-light-mode-400);
  --component-colors-utility-gray-utility-gray-500: var(--colors-gray-light-mode-500);
  --component-colors-utility-gray-utility-gray-600: var(--colors-gray-light-mode-600);
  --component-colors-utility-gray-utility-gray-700: var(--colors-gray-light-mode-700);
  --component-colors-utility-gray-utility-gray-800: var(--colors-gray-light-mode-800);
  --component-colors-utility-gray-utility-gray-900: var(--colors-gray-light-mode-900);
  --component-colors-utility-brand-utility-brand-50: var(--colors-brand-50);
  --component-colors-utility-brand-utility-brand-50_alt: var(--colors-brand-50);
  --component-colors-utility-brand-utility-brand-100: var(--colors-brand-100);
  --component-colors-utility-brand-utility-brand-100_alt: var(--colors-brand-100);
  --component-colors-utility-brand-utility-brand-200: var(--colors-brand-200);
  --component-colors-utility-brand-utility-brand-200_alt: var(--colors-brand-200);
  --component-colors-utility-brand-utility-brand-300: var(--colors-brand-300);
  --component-colors-utility-brand-utility-brand-300_alt: var(--colors-brand-300);
  --component-colors-utility-brand-utility-brand-400: var(--colors-brand-400);
  --component-colors-utility-brand-utility-brand-400_alt: var(--colors-brand-400);
  --component-colors-utility-brand-utility-brand-500: var(--colors-brand-500);
  --component-colors-utility-brand-utility-brand-500_alt: var(--colors-brand-500);
  --component-colors-utility-brand-utility-brand-600: var(--colors-brand-600);
  --component-colors-utility-brand-utility-brand-600_alt: var(--colors-brand-600);
  --component-colors-utility-brand-utility-brand-700: var(--colors-brand-700);
  --component-colors-utility-brand-utility-brand-700_alt: var(--colors-brand-700);
  --component-colors-utility-brand-utility-brand-800: var(--colors-brand-800);
  --component-colors-utility-brand-utility-brand-800_alt: var(--colors-brand-800);
  --component-colors-utility-brand-utility-brand-900: var(--colors-brand-900);
  --component-colors-utility-brand-utility-brand-900_alt: var(--colors-brand-900);
  --component-colors-utility-error-utility-error-50: var(--colors-error-50);
  --component-colors-utility-error-utility-error-100: var(--colors-error-100);
  --component-colors-utility-error-utility-error-200: var(--colors-error-200);
  --component-colors-utility-error-utility-error-300: var(--colors-error-300);
  --component-colors-utility-error-utility-error-400: var(--colors-error-400);
  --component-colors-utility-error-utility-error-500: var(--colors-error-500);
  --component-colors-utility-error-utility-error-600: var(--colors-error-600);
  --component-colors-utility-error-utility-error-700: var(--colors-error-700);
  --component-colors-utility-warning-utility-warning-50: var(--colors-warning-50);
  --component-colors-utility-warning-utility-warning-100: var(--colors-warning-100);
  --component-colors-utility-warning-utility-warning-200: var(--colors-warning-200);
  --component-colors-utility-warning-utility-warning-300: var(--colors-warning-300);
  --component-colors-utility-warning-utility-warning-400: var(--colors-warning-400);
  --component-colors-utility-warning-utility-warning-500: var(--colors-warning-500);
  --component-colors-utility-warning-utility-warning-600: var(--colors-warning-600);
  --component-colors-utility-warning-utility-warning-700: var(--colors-warning-700);
  --component-colors-utility-success-utility-success-50: var(--colors-success-50);
  --component-colors-utility-success-utility-success-100: var(--colors-success-100);
  --component-colors-utility-success-utility-success-200: var(--colors-success-200);
  --component-colors-utility-success-utility-success-300: var(--colors-success-300);
  --component-colors-utility-success-utility-success-400: var(--colors-success-400);
  --component-colors-utility-success-utility-success-500: var(--colors-success-500);
  --component-colors-utility-success-utility-success-600: var(--colors-success-600);
  --component-colors-utility-success-utility-success-700: var(--colors-success-700);
  --component-colors-utility-gray-blue-utility-gray-blue-50: var(--colors-gray-blue-50);
  --component-colors-utility-gray-blue-utility-gray-blue-100: var(--colors-gray-blue-100);
  --component-colors-utility-gray-blue-utility-gray-blue-200: var(--colors-gray-blue-200);
  --component-colors-utility-gray-blue-utility-gray-blue-300: var(--colors-gray-blue-300);
  --component-colors-utility-gray-blue-utility-gray-blue-400: var(--colors-gray-blue-400);
  --component-colors-utility-gray-blue-utility-gray-blue-500: var(--colors-gray-blue-500);
  --component-colors-utility-gray-blue-utility-gray-blue-600: var(--colors-gray-blue-600);
  --component-colors-utility-gray-blue-utility-gray-blue-700: var(--colors-gray-blue-700);
  --component-colors-utility-green-utility-green-50: var(--colors-green-50);
  --component-colors-utility-green-utility-green-100: var(--colors-green-100);
  --component-colors-utility-green-utility-green-200: var(--colors-green-200);
  --component-colors-utility-green-utility-green-300: var(--colors-green-300);
  --component-colors-utility-green-utility-green-400: var(--colors-green-400);
  --component-colors-utility-green-utility-green-500: var(--colors-green-500);
  --component-colors-utility-green-utility-green-600: var(--colors-green-600);
  --component-colors-utility-green-utility-green-700: var(--colors-green-700);
  --component-colors-utility-blue-light-utility-blue-light-50: var(--colors-blue-light-50);
  --component-colors-utility-blue-light-utility-blue-light-100: var(--colors-blue-light-100);
  --component-colors-utility-blue-light-utility-blue-light-200: var(--colors-blue-light-200);
  --component-colors-utility-blue-light-utility-blue-light-300: var(--colors-blue-light-300);
  --component-colors-utility-blue-light-utility-blue-light-400: var(--colors-blue-light-400);
  --component-colors-utility-blue-light-utility-blue-light-500: var(--colors-blue-light-500);
  --component-colors-utility-blue-light-utility-blue-light-600: var(--colors-blue-light-600);
  --component-colors-utility-blue-light-utility-blue-light-700: var(--colors-blue-light-700);
  --component-colors-utility-blue-utility-blue-50: var(--colors-blue-50);
  --component-colors-utility-blue-utility-blue-100: var(--colors-blue-100);
  --component-colors-utility-blue-utility-blue-200: var(--colors-blue-200);
  --component-colors-utility-blue-utility-blue-300: var(--colors-blue-300);
  --component-colors-utility-blue-utility-blue-400: var(--colors-blue-400);
  --component-colors-utility-blue-utility-blue-500: var(--colors-blue-500);
  --component-colors-utility-blue-utility-blue-600: var(--colors-blue-600);
  --component-colors-utility-blue-utility-blue-700: var(--colors-blue-700);
  --component-colors-utility-blue-dark-utility-blue-dark-50: var(--colors-blue-dark-50);
  --component-colors-utility-blue-dark-utility-blue-dark-100: var(--colors-blue-dark-100);
  --component-colors-utility-blue-dark-utility-blue-dark-200: var(--colors-blue-dark-200);
  --component-colors-utility-blue-dark-utility-blue-dark-300: var(--colors-blue-dark-300);
  --component-colors-utility-blue-dark-utility-blue-dark-400: var(--colors-blue-dark-400);
  --component-colors-utility-blue-dark-utility-blue-dark-500: var(--colors-blue-dark-500);
  --component-colors-utility-blue-dark-utility-blue-dark-600: var(--colors-blue-dark-600);
  --component-colors-utility-blue-dark-utility-blue-dark-700: var(--colors-blue-dark-700);
  --component-colors-utility-indigo-utility-indigo-50: var(--colors-indigo-50);
  --component-colors-utility-indigo-utility-indigo-100: var(--colors-indigo-100);
  --component-colors-utility-indigo-utility-indigo-200: var(--colors-indigo-200);
  --component-colors-utility-indigo-utility-indigo-300: var(--colors-indigo-300);
  --component-colors-utility-indigo-utility-indigo-400: var(--colors-indigo-400);
  --component-colors-utility-indigo-utility-indigo-500: var(--colors-indigo-500);
  --component-colors-utility-indigo-utility-indigo-600: var(--colors-indigo-600);
  --component-colors-utility-indigo-utility-indigo-700: var(--colors-indigo-700);
  --component-colors-utility-purple-utility-purple-50: var(--colors-purple-50);
  --component-colors-utility-purple-utility-purple-100: var(--colors-purple-100);
  --component-colors-utility-purple-utility-purple-200: var(--colors-purple-200);
  --component-colors-utility-purple-utility-purple-300: var(--colors-purple-300);
  --component-colors-utility-purple-utility-purple-400: var(--colors-purple-400);
  --component-colors-utility-purple-utility-purple-500: var(--colors-purple-500);
  --component-colors-utility-purple-utility-purple-600: var(--colors-purple-600);
  --component-colors-utility-purple-utility-purple-700: var(--colors-purple-700);
  --component-colors-utility-fuchsia-utility-fuchsia-50: var(--colors-fuchsia-50);
  --component-colors-utility-fuchsia-utility-fuchsia-100: var(--colors-fuchsia-100);
  --component-colors-utility-fuchsia-utility-fuchsia-200: var(--colors-fuchsia-200);
  --component-colors-utility-fuchsia-utility-fuchsia-300: var(--colors-fuchsia-300);
  --component-colors-utility-fuchsia-utility-fuchsia-400: var(--colors-fuchsia-400);
  --component-colors-utility-fuchsia-utility-fuchsia-500: var(--colors-fuchsia-500);
  --component-colors-utility-fuchsia-utility-fuchsia-600: var(--colors-fuchsia-600);
  --component-colors-utility-fuchsia-utility-fuchsia-700: var(--colors-fuchsia-700);
  --component-colors-utility-pink-utility-pink-50: var(--colors-pink-50);
  --component-colors-utility-pink-utility-pink-100: var(--colors-pink-100);
  --component-colors-utility-pink-utility-pink-200: var(--colors-pink-200);
  --component-colors-utility-pink-utility-pink-300: var(--colors-pink-300);
  --component-colors-utility-pink-utility-pink-400: var(--colors-pink-400);
  --component-colors-utility-pink-utility-pink-500: var(--colors-pink-500);
  --component-colors-utility-pink-utility-pink-600: var(--colors-pink-600);
  --component-colors-utility-pink-utility-pink-700: var(--colors-pink-700);
  --component-colors-utility-orange-dark-utility-orange-dark-50: var(--colors-orange-dark-50);
  --component-colors-utility-orange-dark-utility-orange-dark-100: var(--colors-orange-dark-100);
  --component-colors-utility-orange-dark-utility-orange-dark-200: var(--colors-orange-dark-200);
  --component-colors-utility-orange-dark-utility-orange-dark-300: var(--colors-orange-dark-300);
  --component-colors-utility-orange-dark-utility-orange-dark-400: var(--colors-orange-dark-400);
  --component-colors-utility-orange-dark-utility-orange-dark-500: var(--colors-orange-dark-500);
  --component-colors-utility-orange-dark-utility-orange-dark-600: var(--colors-orange-dark-600);
  --component-colors-utility-orange-dark-utility-orange-dark-700: var(--colors-orange-dark-700);
  --component-colors-utility-orange-utility-orange-50: var(--colors-orange-50);
  --component-colors-utility-orange-utility-orange-100: var(--colors-orange-100);
  --component-colors-utility-orange-utility-orange-200: var(--colors-orange-200);
  --component-colors-utility-orange-utility-orange-300: var(--colors-orange-300);
  --component-colors-utility-orange-utility-orange-400: var(--colors-orange-400);
  --component-colors-utility-orange-utility-orange-500: var(--colors-orange-500);
  --component-colors-utility-orange-utility-orange-600: var(--colors-orange-600);
  --component-colors-utility-orange-utility-orange-700: var(--colors-orange-700);
  --colors-foreground-fg-secondary-700: var(--colors-gray-light-mode-700);
  --colors-foreground-fg-secondary_hover: var(--colors-gray-light-mode-800);
  --colors-foreground-fg-tertiary-600: var(--colors-gray-light-mode-600);
  --colors-foreground-fg-tertiary_hover: var(--colors-gray-light-mode-700);
  --colors-foreground-fg-quaternary-400: var(--colors-gray-light-mode-400);
  --colors-foreground-fg-quaternary_hover: var(--colors-gray-light-mode-500);
  --colors-foreground-fg-white: var(--colors-base-white);
  --colors-foreground-fg-disabled: var(--colors-gray-light-mode-400);
  --colors-foreground-fg-disabled_subtle: var(--colors-gray-light-mode-300);
  --colors-foreground-fg-brand-primary-600: var(--colors-brand-500);
  --colors-foreground-fg-brand-primary_alt: var(--colors-foreground-fg-brand-primary-600);
  --colors-foreground-fg-brand-secondary-500: var(--colors-brand-500);
  --colors-foreground-fg-brand-secondary_alt: var(--colors-foreground-fg-brand-secondary-500);
  --colors-foreground-fg-brand-secondary_hover: var(--colors-brand-600);
  --colors-foreground-fg-error-primary: var(--colors-error-600);
  --colors-foreground-fg-error-secondary: var(--colors-error-500);
  --colors-foreground-fg-warning-primary: var(--colors-warning-600);
  --colors-foreground-fg-warning-secondary: var(--colors-warning-500);
  --colors-foreground-fg-success-primary: var(--colors-success-600);
  --colors-foreground-fg-success-secondary: var(--colors-success-500);
  --colors-background-bg-primary: var(--colors-base-white);
  --colors-effects-focus-rings-focus-ring: var(--colors-brand-500);
  --colors-effects-focus-rings-focus-ring-error: var(--colors-error-500);
  --colors-effects-shadows-shadow-xs: #0A0D120D;
  --colors-effects-portfolio-mockups-shadow-main-centre-md: #0A0D1224;
  --colors-effects-portfolio-mockups-shadow-main-centre-lg: #0A0D122E;
  --colors-effects-portfolio-mockups-shadow-overlay-lg: #0A0D121F;
  --colors-effects-portfolio-mockups-shadow-grid-md: #0A0D1214;
  --colors-effects-shadows-shadow-sm_01: #0A0D121A;
  --colors-effects-shadows-shadow-sm_02: #0A0D121A;
  --colors-effects-shadows-shadow-md_01: #0A0D121A;
  --colors-effects-shadows-shadow-md_02: #0A0D120F;
  --colors-effects-shadows-shadow-lg_01: #0A0D1214;
  --colors-effects-shadows-shadow-lg_02: #0A0D1208;
  --colors-effects-shadows-shadow-lg_03: #0A0D120A;
  --colors-effects-shadows-shadow-xl_01: #0A0D1214;
  --colors-effects-shadows-shadow-xl_02: #0A0D1208;
  --colors-effects-shadows-shadow-xl_03: #0A0D120A;
  --colors-effects-shadows-shadow-2xl_01: #0A0D122E;
  --colors-effects-shadows-shadow-2xl_02: #0A0D120A;
  --colors-effects-shadows-shadow-3xl_01: #0A0D1224;
  --colors-effects-shadows-shadow-3xl_02: #0A0D120A;
  --colors-effects-shadows-shadow-skeumorphic-inner: #0A0D120D;
  --colors-effects-shadows-shadow-skeumorphic-inner-border: #0A0D122E;
  --colors-background-bg-primary_alt: var(--colors-base-white);
  --colors-background-bg-primary_hover: var(--colors-gray-light-mode-50);
  --colors-background-bg-primary-solid: var(--colors-gray-light-mode-950);
  --colors-background-bg-secondary: var(--colors-gray-light-mode-50);
  --colors-background-bg-secondary_alt: var(--colors-gray-light-mode-50);
  --colors-background-bg-secondary_hover: var(--colors-gray-light-mode-100);
  --colors-background-bg-secondary_subtle: var(--colors-gray-light-mode-25);
  --colors-background-bg-secondary-solid: var(--colors-gray-light-mode-600);
  --colors-background-bg-tertiary: var(--colors-gray-light-mode-100);
  --colors-background-bg-quaternary: var(--colors-gray-light-mode-200);
  --colors-background-bg-active: var(--colors-gray-light-mode-50);
  --colors-background-bg-disabled: var(--colors-gray-light-mode-100);
  --colors-background-bg-disabled_subtle: var(--colors-gray-light-mode-50);
  --colors-background-bg-overlay: var(--colors-gray-light-mode-950);
  --colors-background-bg-brand-primary: var(--colors-brand-50);
  --colors-background-bg-brand-primary_alt: var(--colors-brand-50);
  --colors-background-bg-brand-secondary: var(--colors-brand-100);
  --colors-background-bg-brand-solid: var(--colors-brand-600);
  --colors-background-bg-brand-solid_hover: var(--colors-brand-700);
  --colors-background-bg-brand-section: var(--colors-brand-800);
  --colors-background-bg-brand-section_subtle: var(--colors-brand-700);
  --colors-background-bg-error-primary: var(--colors-error-50);
  --colors-background-bg-error-secondary: var(--colors-error-100);
  --colors-background-bg-error-solid: var(--colors-error-600);
  --colors-background-bg-error-solid_hover: var(--colors-error-700);
  --colors-background-bg-warning-primary: var(--colors-warning-50);
  --colors-background-bg-warning-secondary: var(--colors-warning-100);
  --colors-background-bg-warning-solid: var(--colors-warning-600);
  --colors-background-bg-success-primary: var(--colors-success-50);
  --colors-background-bg-success-secondary: var(--colors-success-100);
  --colors-background-bg-success-solid: var(--colors-success-600);
  --component-colors-utility-yellow-utility-yellow-50: var(--colors-yellow-50);
  --component-colors-utility-yellow-utility-yellow-100: var(--colors-yellow-100);
  --component-colors-utility-yellow-utility-yellow-200: var(--colors-yellow-200);
  --component-colors-utility-yellow-utility-yellow-300: var(--colors-yellow-300);
  --component-colors-utility-yellow-utility-yellow-400: var(--colors-yellow-400);
  --component-colors-utility-yellow-utility-yellow-500: var(--colors-yellow-500);
  --component-colors-utility-yellow-utility-yellow-600: var(--colors-yellow-600);
  --component-colors-utility-yellow-utility-yellow-700: var(--colors-yellow-700);
  --colors-background-black-white: #FFFFFFFF;
  --colors-text-text-primary: var(--colors-gray-900);
  --colors-text-text-primary_on-brand: var(--colors-base-white);
  --colors-text-text-secondary: var(--colors-gray-700);
  --colors-text-text-secondary_hover: var(--colors-gray-800);
  --colors-text-text-secondary_on-brand: var(--colors-brand-200);
  --colors-text-text-tertiary: var(--colors-gray-600);
  --colors-text-text-tertiary_hover: var(--colors-gray-700);
  --colors-text-text-tertiary_on-brand: var(--colors-brand-200);
  --colors-text-text-quaternary: var(--colors-gray-500);
  --colors-text-text-quaternary_on-brand: var(--colors-brand-300);
  --colors-text-text-white: var(--colors-base-white);
  --colors-text-text-disabled: var(--colors-gray-500);
  --colors-text-text-placeholder: var(--colors-gray-500);
  --colors-text-text-placeholder_subtle: var(--colors-gray-300);
  --colors-text-text-brand-primary: var(--colors-brand-900);
  --colors-text-text-brand-secondary: var(--colors-brand-700);
  --colors-text-text-brand-tertiary: var(--colors-brand-500);
  --colors-text-text-brand-tertiary_alt: var(--colors-brand-600);
  --colors-text-text-error-primary: var(--colors-error-600);
  --colors-text-text-warning-primary: var(--colors-warning-600);
  --colors-text-text-success-primary: var(--colors-success-600);
  --colors-border-border-primary: var(--colors-gray-300);
  --colors-border-border-secondary: var(--colors-gray-200);
  --colors-border-border-tertiary: var(--colors-gray-100);
  --colors-border-border-disabled: var(--colors-gray-300);
  --colors-border-border-disabled_subtle: var(--colors-gray-200);
  --colors-border-border-brand: var(--colors-brand-500);
  --colors-border-border-brand_alt: var(--colors-brand-600);
  --colors-border-border-error: var(--colors-error-500);
  --colors-border-border-error_subtle: var(--colors-error-300);
  --colors-foreground-fg-primary: var(--colors-gray-900);
  --component-colors-alpha-alpha-white-10: rgba(255, 255, 255, 0.10000000149011612);
  --component-colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.20000000298023224);
  --component-colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.30000001192092896);
  --component-colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4000000059604645);
  --component-colors-alpha-alpha-white-50: rgba(255, 255, 255, 0.5);
  --component-colors-alpha-alpha-white-60: rgba(255, 255, 255, 0.6000000238418579);
  --component-colors-alpha-alpha-white-70: rgba(255, 255, 255, 0.699999988079071);
  --component-colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.800000011920929);
  --component-colors-alpha-alpha-white-90: rgba(255, 255, 255, 0.8999999761581421);
  --component-colors-alpha-alpha-white-100: rgba(255, 255, 255, 1);
  --component-colors-alpha-alpha-black-10: rgba(0, 0, 0, 0.10000000149011612);
  --component-colors-alpha-alpha-black-20: rgba(0, 0, 0, 0.20000000298023224);
  --component-colors-alpha-alpha-black-30: rgba(0, 0, 0, 0.30000001192092896);
  --component-colors-alpha-alpha-black-40: rgba(0, 0, 0, 0.4000000059604645);
  --component-colors-alpha-alpha-black-50: rgba(0, 0, 0, 0.5);
  --component-colors-alpha-alpha-black-60: rgba(0, 0, 0, 0.6000000238418579);
  --component-colors-alpha-alpha-black-70: rgba(0, 0, 0, 0.699999988079071);
  --component-colors-alpha-alpha-black-80: rgba(0, 0, 0, 0.800000011920929);
  --component-colors-alpha-alpha-black-90: rgba(0, 0, 0, 0.8999999761581421);
  --component-colors-alpha-alpha-black-100: rgba(0, 0, 0, 1);
  --component-colors-utility-gray-utility-gray-50: var(--colors-gray-light-mode-50);
  --component-colors-components-app-store-badges-app-store-badge-border: rgba(166, 166, 166, 1);
  --component-colors-components-application-navigation-nav-item-button-icon-fg: var(--colors-gray-500);
  --component-colors-components-application-navigation-nav-item-button-icon-fg_active: var(--colors-gray-700);
  --component-colors-components-application-navigation-nav-item-icon-fg: var(--colors-gray-500);
  --component-colors-components-application-navigation-nav-item-icon-fg_active: var(--colors-gray-500);
  --component-colors-components-avatars-avatar-bg: var(--colors-gray-100);
  --component-colors-components-avatars-avatar-profile-photo-border: var(--colors-base-white);
  --component-colors-components-avatars-avatar-contrast-border: rgba(0, 0, 0, 0.07999999821186066);
  --component-colors-components-avatars-avatar-styles-bg-neutral: rgba(224, 224, 224, 1);
  --component-colors-components-breadcrumbs-breadcrumb-fg: var(--colors-gray-600);
  --component-colors-components-breadcrumbs-breadcrumb-fg_hover: var(--colors-gray-700);
  --component-colors-components-breadcrumbs-breadcrumb-bg_hover: var(--colors-gray-50);
  --component-colors-components-breadcrumbs-breadcrumb-brand-fg_hover: var(--colors-brand-700);
  --component-colors-components-breadcrumbs-breadcrumb-brand-bg_hover: var(--colors-brand-50);
  --component-colors-components-breadcrumbs-breadcrumb-icon-fg: var(--colors-gray-500);
  --component-colors-components-breadcrumbs-breadcrumb-icon-fg_hover: var(--colors-gray-700);
  --component-colors-components-breadcrumbs-breadcrumb-brand-icon-fg_hover: var(--colors-brand-700);
  --component-colors-components-buttons-primary-button-primary-fg: var(--colors-base-white);
  --component-colors-components-buttons-primary-button-primary-fg_hover: var(--colors-base-white);
  --component-colors-components-buttons-primary-button-primary-bg: var(--colors-brand-500);
  --component-colors-components-buttons-primary-button-primary-bg_hover: var(--colors-brand-400);
  --component-colors-components-buttons-secondary-button-secondary-fg: var(--colors-gray-700);
  --component-colors-components-buttons-secondary-button-secondary-fg_hover: var(--colors-gray-800);
  --component-colors-components-buttons-secondary-button-secondary-bg: var(--colors-base-white);
  --component-colors-components-buttons-secondary-button-secondary-bg_hover: var(--colors-gray-50);
  --component-colors-components-buttons-secondary-button-secondary-border: var(--colors-gray-300);
  --component-colors-components-buttons-secondary-button-secondary-border_hover: var(--colors-gray-300);
  --component-colors-components-buttons-secondary-color-button-secondary-color-fg: var(--colors-brand-500);
  --component-colors-components-buttons-secondary-color-button-secondary-color-fg_hover: var(--colors-brand-600);
  --component-colors-components-buttons-secondary-color-button-secondary-color-bg: var(--colors-base-white);
  --component-colors-components-buttons-secondary-color-button-secondary-color-bg_hover: var(--colors-brand-50);
  --component-colors-components-buttons-secondary-color-button-secondary-color-border: var(--colors-brand-300);
  --component-colors-components-buttons-secondary-color-button-secondary-color-border_hover: var(--colors-brand-300);
  --component-colors-components-buttons-tertiary-button-tertiary-fg: var(--colors-gray-600);
  --component-colors-components-buttons-tertiary-button-tertiary-fg_hover: var(--colors-gray-700);
  --component-colors-components-buttons-tertiary-button-tertiary-bg_hover: var(--colors-gray-50);
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg: var(--colors-brand-500);
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg_hover: var(--colors-brand-600);
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-bg_hover: var(--colors-brand-50);
  --component-colors-components-buttons-primary-error-button-primary-error-fg: var(--colors-base-white);
  --component-colors-components-buttons-primary-error-button-primary-error-fg_hover: var(--colors-base-white);
  --component-colors-components-buttons-primary-error-button-primary-error-bg: var(--colors-error-500);
  --component-colors-components-buttons-primary-error-button-primary-error-bg_hover: var(--colors-error-600);
  --component-colors-components-buttons-secondary-error-button-secondary-error-fg: var(--colors-error-500);
  --component-colors-components-buttons-secondary-error-button-secondary-error-fg_hover: var(--colors-error-600);
  --component-colors-components-buttons-secondary-error-button-secondary-error-bg: var(--colors-base-white);
  --component-colors-components-buttons-secondary-error-button-secondary-error-bg_hover: var(--colors-error-50);
  --component-colors-components-buttons-secondary-error-button-secondary-error-border: var(--colors-error-300);
  --component-colors-components-buttons-secondary-error-button-secondary-error-border_hover: var(--colors-error-300);
  --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg: var(--colors-error-500);
  --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg_hover: var(--colors-error-600);
  --component-colors-components-buttons-tertiary-error-button-tertiary-error-bg_hover: var(--colors-error-50);
  --component-colors-components-footers-footer-button-fg: var(--colors-brand-200);
  --component-colors-components-footers-footer-button-fg_hover: var(--colors-base-white);
  --component-colors-components-footers-footer-badge-fg: var(--colors-success-700);
  --component-colors-components-footers-footer-badge-bg: var(--colors-success-50);
  --component-colors-components-footers-footer-badge-border: var(--colors-success-200);
  --component-colors-components-header-sections-header-abstract-50-bg: var(--colors-brand-50);
  --component-colors-components-header-sections-header-abstract-100-bg: var(--colors-brand-100);
  --component-colors-components-header-sections-header-abstract-200-bg: var(--colors-brand-200);
  --component-colors-components-header-sections-header-abstract-300-bg: var(--colors-brand-300);
  --component-colors-components-icons-icons-icon-fg-brand: var(--colors-brand-600);
  --component-colors-components-icons-icons-icon-fg-brand_on-brand: var(--colors-brand-200);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-brand: var(--colors-brand-600);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-gray: var(--colors-gray-500);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-error: var(--colors-error-600);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-warning: var(--colors-warning-600);
  --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-success: var(--colors-success-600);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: var(--colors-base-white);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-gray: var(--colors-base-white);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-error: var(--colors-base-white);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-warning: var(--colors-base-white);
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-success: var(--colors-base-white);
  --component-colors-components-icons-featured-icons-modern-featured-icon-modern-border: var(--colors-gray-200);
  --component-colors-components-icons-social-icons-social-icon-fg-x: rgba(36, 46, 54, 1);
  --component-colors-components-icons-social-icons-social-icon-fg-instagram: rgba(0, 1, 0, 1);
  --component-colors-components-icons-social-icons-social-icon-fg-apple: var(--colors-base-black);
  --component-colors-components-icons-social-icons-social-icon-fg-github: var(--colors-base-black);
  --component-colors-components-icons-social-icons-social-icon-fg-angellist: var(--colors-base-black);
  --component-colors-components-icons-social-icons-social-icon-fg-tumblr: rgba(0, 25, 53, 1);
  --component-colors-components-mockups-screen-mockup-border: var(--colors-gray-900);
  --component-colors-components-sliders-slider-handle-bg: var(--colors-base-white);
  --component-colors-components-sliders-slider-handle-border: var(--colors-brand-600);
  --component-colors-components-thumbnail-thumbnail-badge-brand-fg: var(--colors-brand-600);
  --component-colors-components-thumbnail-thumbnail-badge-success-fg: var(--colors-success-600);
  --component-colors-components-toggles-toggle-button-fg_disabled: var(--colors-gray-50);
  --component-colors-components-tooltips-tooltip-supporting-text: var(--colors-gray-300);
  --component-colors-components-wysiwyg-editor-wysiwyg-editor-icon-fg: var(--colors-gray-400);
  --component-colors-components-wysiwyg-editor-wysiwyg-editor-icon-fg_active: var(--colors-gray-500);
  --component-colors-utility-gray-utility-gray-100: var(--colors-gray-100);
  --component-colors-utility-gray-utility-gray-200: var(--colors-gray-200);
  --component-colors-utility-gray-utility-gray-300: var(--colors-gray-300);
  --component-colors-utility-gray-utility-gray-400: var(--colors-gray-400);
  --component-colors-utility-gray-utility-gray-500: var(--colors-gray-500);
  --component-colors-utility-gray-utility-gray-600: var(--colors-gray-600);
  --component-colors-utility-gray-utility-gray-700: var(--colors-gray-700);
  --component-colors-utility-gray-utility-gray-800: var(--colors-gray-800);
  --component-colors-utility-gray-utility-gray-900: var(--colors-gray-900);
  --component-colors-utility-brand-utility-brand-50: var(--colors-brand-50);
  --component-colors-utility-brand-utility-brand-50_alt: var(--colors-brand-50);
  --component-colors-utility-brand-utility-brand-100: var(--colors-brand-100);
  --component-colors-utility-brand-utility-brand-100_alt: var(--colors-brand-100);
  --component-colors-utility-brand-utility-brand-200: var(--colors-brand-200);
  --component-colors-utility-brand-utility-brand-200_alt: var(--colors-brand-200);
  --component-colors-utility-brand-utility-brand-300: var(--colors-brand-300);
  --component-colors-utility-brand-utility-brand-300_alt: var(--colors-brand-300);
  --component-colors-utility-brand-utility-brand-400: var(--colors-brand-400);
  --component-colors-utility-brand-utility-brand-400_alt: var(--colors-brand-400);
  --component-colors-utility-brand-utility-brand-500: var(--colors-brand-500);
  --component-colors-utility-brand-utility-brand-500_alt: var(--colors-brand-500);
  --component-colors-utility-brand-utility-brand-600: var(--colors-brand-600);
  --component-colors-utility-brand-utility-brand-600_alt: var(--colors-brand-600);
  --component-colors-utility-brand-utility-brand-700: var(--colors-brand-700);
  --component-colors-utility-brand-utility-brand-700_alt: var(--colors-brand-700);
  --component-colors-utility-brand-utility-brand-800: var(--colors-brand-800);
  --component-colors-utility-brand-utility-brand-800_alt: var(--colors-brand-800);
  --component-colors-utility-brand-utility-brand-900: var(--colors-brand-900);
  --component-colors-utility-brand-utility-brand-900_alt: var(--colors-brand-900);
  --component-colors-utility-error-utility-error-50: var(--colors-error-50);
  --component-colors-utility-error-utility-error-100: var(--colors-error-100);
  --component-colors-utility-error-utility-error-200: var(--colors-error-200);
  --component-colors-utility-error-utility-error-300: var(--colors-error-300);
  --component-colors-utility-error-utility-error-400: var(--colors-error-400);
  --component-colors-utility-error-utility-error-500: var(--colors-error-500);
  --component-colors-utility-error-utility-error-600: var(--colors-error-600);
  --component-colors-utility-error-utility-error-700: var(--colors-error-700);
  --component-colors-utility-warning-utility-warning-50: var(--colors-warning-50);
  --component-colors-utility-warning-utility-warning-100: var(--colors-warning-100);
  --component-colors-utility-warning-utility-warning-200: var(--colors-warning-200);
  --component-colors-utility-warning-utility-warning-300: var(--colors-warning-300);
  --component-colors-utility-warning-utility-warning-400: var(--colors-warning-400);
  --component-colors-utility-warning-utility-warning-500: var(--colors-warning-500);
  --component-colors-utility-warning-utility-warning-600: var(--colors-warning-600);
  --component-colors-utility-warning-utility-warning-700: var(--colors-warning-700);
  --component-colors-utility-success-utility-success-50: var(--colors-success-50);
  --component-colors-utility-success-utility-success-100: var(--colors-success-100);
  --component-colors-utility-success-utility-success-200: var(--colors-success-200);
  --component-colors-utility-success-utility-success-300: var(--colors-success-300);
  --component-colors-utility-success-utility-success-400: var(--colors-success-400);
  --component-colors-utility-success-utility-success-500: var(--colors-success-500);
  --component-colors-utility-success-utility-success-600: var(--colors-success-600);
  --component-colors-utility-success-utility-success-700: var(--colors-success-700);
  --colors-foreground-fg-secondary: var(--colors-gray-700);
  --colors-foreground-fg-secondary_hover: var(--colors-gray-800);
  --colors-foreground-fg-tertiary: var(--colors-gray-600);
  --colors-foreground-fg-tertiary_hover: var(--colors-gray-700);
  --colors-foreground-fg-quaternary: var(--colors-gray-500);
  --colors-foreground-fg-quaternary_hover: var(--colors-gray-600);
  --colors-foreground-fg-quinary: var(--colors-gray-400);
  --colors-foreground-fg-quinary_hover: var(--colors-gray-500);
  --colors-foreground-fg-senary: var(--colors-gray-300);
  --colors-foreground-fg-white: var(--colors-base-white);
  --colors-foreground-fg-disabled: var(--colors-gray-400);
  --colors-foreground-fg-disabled_subtle: var(--colors-gray-300);
  --colors-foreground-fg-brand-primary: var(--colors-brand-500);
  --colors-foreground-fg-brand-primary_alt: var(--colors-brand-500);
  --colors-foreground-fg-brand-secondary: var(--colors-brand-400);
  --colors-foreground-fg-error-primary: var(--colors-error-600);
  --colors-foreground-fg-error-secondary: var(--colors-error-500);
  --colors-foreground-fg-warning-primary: var(--colors-warning-600);
  --colors-foreground-fg-warning-secondary: var(--colors-warning-500);
  --colors-foreground-fg-success-primary: var(--colors-success-600);
  --colors-foreground-fg-success-secondary: var(--colors-success-500);
  --colors-background-bg-primary: var(--colors-base-white);
  --colors-effects-focus-rings-focus-ring: var(--colors-brand-500);
  --colors-effects-focus-rings-focus-ring-error: var(--colors-error-500);
  --colors-effects-shadows-shadow-xs: rgba(31, 31, 31, 0.05000000074505806);
  --colors-effects-portfolio-mockups-shadow-main-centre-md: rgba(31, 31, 31, 0.14000000059604645);
  --colors-effects-portfolio-mockups-shadow-main-centre-lg: rgba(31, 31, 31, 0.18000000715255737);
  --colors-effects-portfolio-mockups-shadow-overlay-lg: rgba(31, 31, 31, 0.11999999731779099);
  --colors-effects-portfolio-mockups-shadow-grid-md: rgba(31, 31, 31, 0.07999999821186066);
  --colors-effects-shadows-shadow-sm_01: rgba(31, 31, 31, 0.10000000149011612);
  --colors-effects-shadows-shadow-sm_02: rgba(31, 31, 31, 0.05999999865889549);
  --colors-effects-shadows-shadow-md_01: rgba(31, 31, 31, 0.10000000149011612);
  --colors-effects-shadows-shadow-md_02: rgba(31, 31, 31, 0.05999999865889549);
  --colors-effects-shadows-shadow-lg_01: rgba(31, 31, 31, 0.07999999821186066);
  --colors-effects-shadows-shadow-lg_02: rgba(31, 31, 31, 0.029999999329447746);
  --colors-effects-shadows-shadow-xl_01: rgba(31, 31, 31, 0.07999999821186066);
  --colors-effects-shadows-shadow-xl_02: rgba(31, 31, 31, 0.029999999329447746);
  --colors-effects-shadows-shadow-2xl: rgba(31, 31, 31, 0.18000000715255737);
  --colors-effects-shadows-shadow-3xl: rgba(31, 31, 31, 0.14000000059604645);
  --colors-effects-shadows-shadow-skeumorphic-inner: rgba(31, 31, 31, 0.05000000074505806);
  --colors-effects-shadows-shadow-skeumorphic-inner-border: rgba(31, 31, 31, 0.18000000715255737);
  --colors-background-bg-primary_alt: var(--colors-base-white);
  --colors-background-bg-primary_hover: var(--colors-gray-50);
  --colors-background-bg-primary-solid: var(--colors-gray-950);
  --colors-background-bg-secondary: var(--colors-gray-light-mode-50);
  --colors-background-bg-secondary_alt: var(--colors-gray-50);
  --colors-background-bg-secondary_hover: var(--colors-gray-100);
  --colors-background-bg-secondary_subtle: var(--colors-gray-25);
  --colors-background-bg-secondary-solid: var(--colors-gray-600);
  --colors-background-bg-tertiary: var(--colors-gray-100);
  --colors-background-bg-quaternary: var(--colors-gray-200);
  --colors-background-bg-active: var(--colors-gray-50);
  --colors-background-bg-disabled: var(--colors-gray-100);
  --colors-background-bg-disabled_subtle: var(--colors-gray-50);
  --colors-background-bg-overlay: var(--component-colors-alpha-alpha-black-50);
  --colors-background-bg-brand-primary: var(--colors-brand-50);
  --colors-background-bg-brand-primary_alt: var(--colors-brand-50);
  --colors-background-bg-brand-secondary: var(--colors-brand-100);
  --colors-background-bg-brand-solid: var(--colors-brand-500);
  --colors-background-bg-brand-solid_hover: var(--colors-brand-700);
  --colors-background-bg-brand-section: var(--colors-brand-800);
  --colors-background-bg-brand-section_subtle: var(--colors-brand-700);
  --colors-background-bg-error-primary: var(--colors-error-50);
  --colors-background-bg-error-secondary: var(--colors-error-100);
  --colors-background-bg-error-solid: var(--colors-error-600);
  --colors-background-bg-warning-primary: var(--colors-warning-50);
  --colors-background-bg-warning-secondary: var(--colors-warning-100);
  --colors-background-bg-warning-solid: var(--colors-warning-600);
  --colors-background-bg-success-primary: var(--colors-success-50);
  --colors-background-bg-success-secondary: var(--colors-success-100);
  --colors-background-bg-success-solid: var(--colors-success-600);
  --colors-foreground-fg-brand-primary-500: var(--colors-brand-500);
  --colors-background-bg-main: var(--colors-background-bg-primary, #FFF);
  --custom-button-gray-border: #E6E6E6 ;
}

/*# sourceMappingURL=app.css.map */