body,
:is(*::after, *::before) {
  /* Black */
  --black: #1D1D1B;
  --blackOpacity50: #1D1D1B09;
  --blackOpacity100: #1D1D1B10; /* 6% */
  --blackOpacity200: #1D1D1B25; /* 15% */
  --blackOpacity300: #1D1D1B40; /* 25% */
  --blackOpacity400: #1D1D1B60; /* 37% */
  --blackOpacity500: #1D1D1B80; /* 50% */
  --blackOpacity800: #1D1D1BCC; /* 78% */

  /* White */
  --white: #fff;
  --whiteOpacity50: #ffffff09;
  --whiteOpacity100: #ffffff10;
  --whiteOpacity200: #ffffff25;
  --whiteOpacity300: #ffffff40;
  --whiteOpacity400: #ffffff60;
  --whiteOpacity500: #ffffff80;
  --whiteOpacity800: #ffffffCC;

  /* Gray */
  --gray200: #F5F5F7;
  --gray300: #E8E8ED;
  --gray400: #D2D2D7;
  --gray500: #909095;
  --gray900: #1D1D1F;

  /* Primary */
  --primary100: #E7F1FF;
  --primary400: #3D8BFD;
  --primary500: #0A2753;
  --primary600: #0A58CA;
  --primaryOpacity100: #0A275310;
  --primaryOpacity200: #0A275325;
  --primaryOpacity300: #0A275340;
  --primaryOpacity500: #0A275380;

  /* Secondary */
  --secondary100: #FFF1F1;
  --secondary400: #E05255;
  --secondary500: #385740;
  --secondary600: #AC202F;
  --secondaryOpacity100: #38574010;
  --secondaryOpacity200: #38574025;
  --secondaryOpacity300: #38574040;
  --secondaryOpacity500: #38574080;

  /* Status */
  --success: #28A745;
  --error: #DC3545;
  --errorOpacity100: #DC354510;
  --errorOpacity400: #DC354560;
}

.light_mode,
.light_mode :is(*::before, *::after),
.dark_mode .invert-colors,
.dark_mode .invert-colors :is(*::before, *::after) {
  --pageBg: #FFFBF6;
  --contentColor: var(--black);
  --contentOpacityColor: var(--blackOpacity500);

  --linkDefaultHoverColor: var(--primary600);
  --linkContentUnderline: var(--blackOpacity400);
  --breadcrumbLinkColor: var(--blackOpacity400);

  --dividerDefault: var(--blackOpacity200);

  --btnDefaultHoverBg: var(--primary600);
  --btnDefaultDisableBg: var(--blackOpacity100);
  --btnDefaultDisableColor: var(--blackOpacity500);

  --btnOutlinedHoverBg: var(--primaryOpacity100);
  --btnOutlineDisableBorder: var(--blackOpacity200);

  --inputDefaultBg: var(--blackOpacity50);
  --inputBorder: var(--blackOpacity300);

  --grayBg: var(--gray200);
  --cardDefaultBg: var(--gray200);
}

.dark_mode,
.dark_mode :is(*::before, *::after),
.light_mode .dark_mode :is(*::before, *::after),
.light_mode .invert-colors,
.light_mode .invert-colors :is(*::before, *::after) {
  --pageBg: #FFFBF6;
  --contentColor: var(--white);
  --contentOpacityColor: var(--whiteOpacity500);

  --linkDefaultHoverColor: var(--primary400);
  --linkContentUnderline: var(--whiteOpacity400);

  --dividerDefault: var(--whiteOpacity300);

  --btnDefaultHoverBg: var(--primary400);
  --btnDefaultDisableBg: var(--whiteOpacity100);

  --btnOutlinedHoverBg: var(--primaryOpacity300);
  --btnOutlineDisableBorder: var(--whiteOpacity200);

  --inputDefaultBg: var(--gray900);
  --inputBorder: var(--whiteOpacity300);

  --grayBg: var(--gray900);
  --cardDefaultBg: var(--gray900);
}

:is(.dark_mode, .light_mode),
:is(.dark_mode, .light_mode) :is(*::before, *::after),
:is(.dark_mode, .light_mode) .invert-colors,
:is(.dark_mode, .light_mode) .invert-colors :is(*::before, *::after) {
  color: var(--contentColor);
}

:is(.dark_mode, .light_mode){
    color: var(--contentPrimaryColor) !important;
}

body,
:is(*::after, *::before) {
  --sectionLiteAccentBg: var(--primary100);
  --brandHeroBg: var(--primary500);

  --contentPrimaryColor: var(--primary500);
  --contentOnDark: var(--white);
  --contentOnPrimary: var(--white);
  --contentOnSecondary: var(--white);

  --linkDefaultColor: var(--primary500);
  --linkDefaultUnderline: var(--primaryOpacity300);
  --linkDefaultHoverUnderline: var(--linkDefaultHoverColor);

  --linkContentColor: var(--contentColor);
  --linkContentHoverColor: var(--primary500);
  --linkContentHoverUnderline: var(--primary500);

  --btnDefaultBg: var(--primary500);
  --btnDefaultColor: var(--contentOnAccent);
  --btnDefaultDisableColor: var(--contentOpacityColor);

  --btnOutlinedBg: transparent;
  --btnOutlinedColor: var(--primary500);
  --btnOutlinedBorder: var(--btnOutlinedColor);
  --btnOutlinedDisableBg: transparent;
  --btnOutlinedDisableColor: var(--contentOpacityColor);
  --btnOutlinedDisableBorder: var(--blackOpacity200);

  --inputLabelColor: var(--contentColor);
  --inputPlaceholder: var(--contentOpacityColor);
  --inputColor: var(--contentColor);

  --inputErrorColor: var(--error);
  --inputErrorBg: var(--errorOpacity100);
  --inputErrorBorder: var(--errorOpacity400);

  --primaryBg: var(--primary500);
  --primaryLightBg: var(--primary100);
  --secondaryBg: var(--secondary500);
  --secondaryLightBg: var(--secondary100);

  --cardAccentBg: var(--primary500);

  --navDefaultColor: var(--contentColor);
  --navActiveColor: var(--primary500);
  --navDisableColor: var(--blackOpacity300);

  --linkColor: var(--linkDefaultColor);
  --linkColorHover: var(--linkDefaultHoverColor);
  --linkUnderlineColor: var(--linkDefaultUnderline);
  --linkUnderlineColorHover: var(--linkDefaultHoverUnderline);

  --contentAccentColor: var(--contentPrimaryColor);
  --contentOnAccent: var(--contentOnPrimary);

  --blackOpacityColor: var(--blackOpacity100);
  --blackLowOpasityColor: var(--blackOpacity300);
  --cardBgColor: var(--cardDefaultBg);

  --whiteOpasityColor: var(--whiteOpacity100);
  --whiteLowOpasityColor: var(--whiteOpacity300);

  --lightGray: var(--gray200);
  --gray10: var(--gray200);
  --gray20: var(--gray300);

  --bgColor: var(--pageBg);
  --inputBg: var(--inputDefaultBg);
  --bgOpacityColor: transparent;

  --onAccentColor: var(--contentOnAccent);
  --mainColor: var(--contentColor);
  --mainOpacityColor: var(--contentOpacityColor);
  --lowContrastColor: var(--whiteOpacity100);
  --accentColor: var(--primary500);
  --accentOpacityColor: var(--primaryOpacity300);
  --accentHoverColor: var(--primary600);
  --accentHoverOpacityColor: var(--secondaryOpacity300);
}

.primary-light {
  background-color: var(--sectionLiteAccentBg);
}