body,
:is(*::after, *::before) {
  /* Black */
  --black: #00000F;
  --blackOpacity50:  #00000F09; /* 3% */
  --blackOpacity100: #00000F10; /* 6% */
  --blackOpacity200: #00000F25; /* 15% */
  --blackOpacity300: #00000F40; /* 25% */
  --blackOpacity400: #00000F60; /* 37% */
  --blackOpacity500: #00000F80; /* 50% */
  --blackOpacity800: #00000FCC; /* 78% */

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

  /* Gray */
  --gray200: #F5F5F7; /* default bg card light mode */
  --gray300: #E8E8ED;
  --gray400: #D2D2D7;
  --gray500: #909095;
  --gray900: #1d1d1f;  /* default bg card dark mode */

  /* Primary */
  --primary100: #e7f1ff;
  --primary400: #3d8bfd;
  --primary500: #24436B;
  --primary600: #0A58CA;
  --primaryOpacity100: #0D6EFD10;
  --primaryOpacity200: #0D6EFD25;
  --primaryOpacity300: #0D6EFD40;
  --primaryOpacity500: #0D6EFD80;

  /* Secondary */
  --secondary100: #FFF1F1;
  --secondary400: #E05255;
  --secondary500: #DDCFD0;
  --secondary600: #AC202F;
  --secondaryOpacity100: #D21F3810;
  --secondaryOpacity200: #D21F3825;
  --secondaryOpacity300: #D21F3840;
  --secondaryOpacity500: #D21F3880;

  /* 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) {
   /* Page */
  --pageBg: #F4EFE8;

  /* Content */
  --contentColor: var(--black);
  --contentOpacityColor: var(--blackOpacity500);

  /* Link */
  --linkDefaultHoverColor: var(--primary600);
  --linkContentUnderline: var(--blackOpacity400);
  --breadcrumbLinkColor: var(--black);

  /* Separator */
  --dividerDefault: var(--blackOpacity200);

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

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

  /* Input */
  --inputDefaultBg: var(--blackOpacity100);
  --inputBorder: var(--blackOpacity300);

  /* Background */
  --grayBg: var(--gray200);

  /* Card */
  --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) {
  /* Page */
  --pageBg: var(--black);

  /* Content */
  --contentColor: var(--white);
  --contentOpacityColor: var(--whiteOpacity500);

  /* Link */
  --linkDefaultHoverColor: var(--primary400);  
  --linkContentUnderline: var(--whiteOpacity400);

  /* Separator */
  --dividerDefault: var(--whiteOpacity300); 
  
  /* Button */
  --btnDefaultHoverBg: var(--primary400);
  --btnDefaultDisableBg: var(--whiteOpacity100);

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

  /* Input */
  --inputDefaultBg: var(--whiteOpacity50);
  --inputBorder: var(--whiteOpacity300);

  /* Background */
  --grayBg: var(--gray900);

  /* Card */
  --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);
}

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

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

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

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

  /* Button */
  --btnDefaultBg: var(--primary500);
  --btnDefaultColor: var(--contentOnAccent);

  --btnDefaultDisableColor: var(--contentOpacityColor);

  --btnOutlinedBg: transparent;
  --btnOutlinedColor: var(--primary500);
  --btnOutlinedBorder: var(--btnOutlinedColor);

  --btnOutlinedHoverBg: var(--primary100);
  --btnOutlinedDisableBg: transparent;
  --btnOutlinedDisableColor: var(--contentOpacityColor);
  --btnOutlinedDisableBorder: var(--blackOpacity200);

  /* Input */
  --inputLabelColor: var(--contentColor);
  --inputPlaceholder: var(--contentOpacityColor);
  --inputColor: var(--contentColor);

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

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

  /* Card */
  --cardAccentBg: var(--primary500);

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

  /* Legacy */
  --linkColor: var(--linkDefaultColor);
  --linkColorHover: var(--linkDefaultHoverColor);

  --linkUnderlineColor: var(--linkDefaultUnderline);
  --linkUnderlineColorHover: var(--linkDefaultHoverUnderline);

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

body,
:is(*::after, *::before) {
  /* Legacy */
  --blackOpacityColor: var(--blackOpacity100);
  --blackLowOpasityColor: var(--blackOpacity300);

  --cardBgColor: var(--cardDefaultBg);

  /* Content */
  --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);
}