/* Priority: 90
 * DecFort palette: Figma 40:938; component states: 6524:18625.
 * Component states take precedence over older swatch captions.
 */
body,
:is(*::before, *::after) {
  --black: #00000f;
  --blackOpacity50: #00000f09;
  --blackOpacity100: #00000f10;
  --blackOpacity200: #00000025;
  --blackOpacity300: #00000040;
  --blackOpacity400: #00000060;
  --blackOpacity500: #00000080;
  --blackOpacity800: #00000fc7;
  --white: #ffffff;
  --whiteOpacity50: #ffffff09;
  --whiteOpacity100: #ffffff10;
  --whiteOpacity200: #ffffff25;
  --whiteOpacity300: #ffffff40;
  --whiteOpacity400: #ffffff60;
  --whiteOpacity500: #ffffff80;
  --whiteOpacity800: #ffffffc7;
  --gray200: #f5f5f7;
  --gray300: #e8e8ed;
  --gray400: #d2d2d7;
  --gray500: #909095;
  --gray900: #1d1d1f;
  --primary100: #fadfe5;
  --primary400: #e44e71;
  --primary500: #de224e;
  --primary600: #b11b3e;
  --primaryOpacity100: #de224e10;
  --primaryOpacity200: #de224e25;
  --primaryOpacity300: #de224e40;
  --primaryOpacity500: #de224e80;
  --secondary100: #e7e7f4;
  --secondary400: #7d77b6;
  --secondary500: #585cb6;
  --secondary600: #464991;
  --secondaryOpacity100: #585cb610;
  --secondaryOpacity200: #585cb625;
  --secondaryOpacity300: #585cb640;
  --secondaryOpacity500: #585cb680;
  --success: #28a745;
  --error: #dc3545;
  --errorOpacity100: #dc354510;
  --errorOpacity400: #dc354560;
}

/* Rebind mode-dependent aliases on the same element as their source tokens. */
.light_mode,
.light_mode :is(*::before, *::after),
.dark_mode .invert-colors,
.dark_mode .invert-colors :is(*::before, *::after) {
  --btnOutlinedHoverBg: var(--primaryOpacity100);
  --btnOutlinedDisableBorder: var(--blackOpacity200);
  --inputDefaultBg: var(--blackOpacity50);
  --inputBg: var(--inputDefaultBg);
}

.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) {
  --btnOutlinedHoverBg: var(--primaryOpacity300);
  --btnOutlinedDisableBorder: var(--whiteOpacity200);
  --btnDefaultDisableColor: var(--whiteOpacity500);
  --btnOutlinedDisableColor: var(--whiteOpacity500);
  --inputDefaultBg: var(--whiteOpacity50);
  --inputBg: var(--inputDefaultBg);
  --inputLabelColor: var(--white);
  --inputColor: var(--white);
  --inputPlaceholder: var(--whiteOpacity500);
}

body,
:is(*::before, *::after),
:is(.light_mode, .dark_mode),
:is(.light_mode, .dark_mode) .invert-colors,
:is(.light_mode, .dark_mode) :is(*::before, *::after) {
  --btnDefaultColor: var(--white);
  --btnDefaultHoverBg: var(--primary400);
  --linkDefaultHoverColor: var(--primary400);
  --linkDefaultHoverUnderline: var(--primary400);
  --linkColorHover: var(--primary400);
  --linkUnderlineColorHover: var(--primary400);
}

/* Existing Xleb inverted form API, matching the filled fields over imagery. */
body {
  --invertInputColor: var(--white);
  --invertInputPlaceholderColor: var(--whiteOpacity500);
  --invertInputBg: var(--whiteOpacity300);
  --invertInputHoverBg: var(--whiteOpacity300);
  --invertInputFocusBg: var(--whiteOpacity300);
  --invertInputHoverBorder: transparent;
  --invertInputFocusBorder: transparent;
  --invertInputErrorColor: var(--error);
  --invertInputErrorBorder: var(--errorOpacity400);
  --invertButtonBg: var(--primary500);
  --invertButtonColor: var(--white);
  --invertButtonHoverBg: var(--primary400);
  --invertButtonHoverColor: var(--white);
}

/* Route the legacy high-specificity white error border through its token. */
.invert-colors .xleb-form.xleb-form--invert.filled .input-box :is(
  input:not([type="submit"], [type="checkbox"], [type="radio"], [type="hidden"], .terms),
  textarea,
  select,
  .custom-dropdown-selected
):is(.error, .error-animation, [aria-invalid="true"]) {
  border-color: var(--invertInputErrorBorder) !important;
}