@mixin darkTheme {
  --background-primary: #292c3d;
  --background-secondary: #31374a;
  --background-tertiary: #31414a;
  --background-quaternary: #6b7186;
  --background-primary-inverse: #ffffff;
  --background-secondary-inverse: #f6f8fa;
  --background-tertiary-inverse: #f4f5ff;
  --background-quaternary-inverse: #e9ebf8;

  --content-primary: #ffffff;
  --content-secondary: #e4e7f8;
  --content-tertiary: #d3dbff;
  --content-quaternary: #9da0b4;
  --content-primary-inverse: #040823;
  --content-secondary-inverse: #4f515b;
  --content-tertiary-inverse: #717483;
  --content-quaternary-inverse: #92a9ba;

  --border-primary: #4d505f;
  --border-secondary: #555c74;
  --border-primary-inverse: #e8e8e8;
  --border-secondary-inverse: #cdcdcd;

  // primary
  --primary: #4a58fb;
  --on-primary: #ffffff;
  --primary-medium: #e9ebf9;
  --primary-light: #e9ebf9;
  --primary-inverse: #0cbef8;

  // secondary or accent
  --secondary: #eaeaea;
  --on-secondary: #ffffff;
  --secondary-medium: #ffffff;
  --secondary-light: #ffffff;

  // alert
  --alert: #ffffff;
  --on-alert: #ffffff;
  --alert-medium: #ffffff;
  --alert-light: #ffffff;

  // warning
  --warning: #dc6803;
  --on-warning: #ffffff;
  --warning-medium: #ffb475;
  --warning-light: #fff4ec;

  // information
  --information: #7d3bff;
  --on-information: #ffffff;
  --information-medium: #bc9bf6;
  --information-light: #ece3fb;

  // success or positive
  --success: #32936f;
  --on-success: #ffffff;
  --success-medium: #cce4db;
  --success-light: #dffff4;

  // error or negative
  --error: #f57e77;
  --on-error: #ffffff;
  --error-medium: #ffd7d4;
  --error-light: #f9e8e7;

  //loading colors
  --primary-loading: var(--primary);
  --secondary-loading: var(--secondary-border);
  --danger-loading: var(--error);
  --default-loading: var(--content-primary);

  // shadow
  --shadow-primary: 0 0 20px rgba(150, 150, 150, 0.6);
  --popup-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.188);

  // radius
  --radius-1x: 2px;
  --radius-2x: calc(var(--radius-1x) * 2);
  --radius-3x: calc(var(--radius-1x) * 3);
  --radius-4x: calc(var(--radius-1x) * 4);
  --radius-5x: calc(var(--radius-1x) * 5);
  --radius-6x: calc(var(--radius-1x) * 6);
  --radius-7x: calc(var(--radius-1x) * 7);
  --radius-8x: calc(var(--radius-1x) * 8);

  // spacing
  --spacing-1x: 4px;
  --spacing-2x: calc(var(--spacing-1x) * 2);
  --spacing-3x: calc(var(--spacing-1x) * 3);
  --spacing-4x: calc(var(--spacing-1x) * 4);
  --spacing-5x: calc(var(--spacing-1x) * 5);
  --spacing-6x: calc(var(--spacing-1x) * 6);
  --spacing-7x: calc(var(--spacing-1x) * 7);
  --spacing-8x: calc(var(--spacing-1x) * 8);
  --spacing-9x: calc(var(--spacing-1x) * 9);
  --spacing-10x: calc(var(--spacing-1x) * 10);
  --spacing-11x: calc(var(--spacing-1x) * 11);
  --spacing-12x: calc(var(--spacing-1x) * 12);

  --side-spacing: var(--spacing-3x);

  // input styles
  --input-default-background: #fff;
  --input-default-border: #b4b4b4;
  --input-default-color: #b4b4b4;

  --input-focus-background: #fff;
  --input-focus-border: #4a58fb;
  --input-focus-color: #040823;

  --input-error-background: #fff;
  --input-error-border: #f57e77;
  --input-error-color: #717483;

  --input-disabled-background: #f8f8f8;
  --input-disabled-border: #dde2e5;
  --input-disabled-color: #cbcbcb;

  --input-readonly-background: #f2f4f5;
  --input-readonly-border: #dde2e5;
  --input-readonly-color: #cbcbcb;

  --form-element-small-height: 24px;
  --form-element-normal-height: 32px;
  --form-element-large-height: 40px;
}