.remox {
  /* base */
  --ds-c-grey-dark: #242b34;

  /* font family */
  --ff-primary: 'Red Hat Display';
  --ff-secondary: 'Atkinson Hyperlegible';
  --ff-tertiary: 'REM';
  --ff-quaternary: 'Lexend Deca';

  /* color */
  --c-primary: var(--ds-c-black);
  --c-primary-hover: var(--ds-c-grey-default);

  --c-secondary: var(--ds-c-white);
  --c-secondary-hover: var(--ds-c-white);
  --c-secondary-disabled: var(--ds-c-white);

  --c-tertiary: var(--ds-c-blue-dark);
  --c-tertiary-hover: var(--ds-c-grey-default);
  --c-tertiary-disabled: var(--ds-c-grey-hover);
  --c-tertiary-light: var(--ds-c-blue-neutral-hover);

  --c-quaternary: var(--ds-c-blue-neutral);

  --c-info: var(--ds-c-red);
  --c-info-hover: var(--ds-c-red-hover);

  --c-sub-info: var(--ds-c-grey-default);
  --c-sub-info-hover: #a9bbc9;

  --c-tab-active: #a9bbc9;
  --c-tab-active-2: var(--ds-c-white);
  --c-tab-deactive: var(--ds-c-grey-default);

  --c-action: var(--ds-c-blue);

  --c-required: var(--ds-c-red);

  --c-calculator-rate: var(--ds-c-blue-neutral);
  --c-calculator-rate2: var(--ds-c-white);
  --c-calculator-rate3: var(--ds-c-blue-neutral);
  --c-calculator-input: var(--ds-c-green-default);
  --c-calculator-border: transparent;

  --c-fxcalculator-bg: var(--ds-c-white);
  --c-fxcalculator-text: var(--ds-c-black);
  --c-fxcalculator-text2: var(--ds-c-white);
  --c-fxcalculator-rate: var(--ds-c-white);

  /* border */
  --border-primary: 1px solid var(--ds-c-blue);
  --border-primary-hover: 1px solid var(--ds-c-blue-hover);

  --border-secondary: 1px solid var(--ds-c-blue-dark);
  --border-secondary-hover: 1px solid var(--ds-c-blue-hover);

  --border-filter: 1px solid var(--ds-c-blue);
  --border-filter-hover: 1px solid var(--ds-c-blue-hover);
  --border-filter-2: 1px solid var(--ds-c-blue-neutral);
  --border-filter-2-hover: 1px solid var(--ds-c-blue-neutral-hover);

  /* background */
  --bg-primary: var(--ds-c-sky);
  --bg-primary-hover: var(--ds-c-blue-neutral-hover);
  --bg-primary-disabled: var(--ds-c-grey-disabled);

  --bg-info: var(--ds-c-red-light);

  --bg-document-upload: var(--ds-c-blue-dark);

  /*  button */
  --button-logout-txt: var(--ds-c-blue);
  --button-logout-bg: var(--ds-c-black-disabled);

  /* --root-header */
  --root-header-bg: var(--ds-c-white);
  --root-header-bs: var(--ds-bs-1);
  --root-header-btn-active: var(--ds-c-blue);
  --root-header-btn-inactive: var(--ds-c-blue);
  --root-header-btn-hover: var(--ds-c-blue-hover);
  --root-header-text-active: var(--ds-c-white);

  /* --root-body */
  --root-body-bg: var(--ds-c-blue);
  --root-body-bg-hover: var(--ds-c-blue-hover);
  --root-body-bg-disabled: var(--ds-c-blue-disabled);

  /* --root-login */
  --root-login-introduce-bg: rgb(238 242 245 / 80%);

  /* --root-footer */
  --root-footer-bg: #242b34;

  /* process step */
  --bg-step-1: var(--ds-c-blue-light);
}

form input::placeholder {
  color: var(--ds-c-blue-disabled) !important;
}