@mixin lightTheme {
  // background
  --background-primary: #ffffff;
  --background-secondary: #f6f8fa;
  --background-tertiary: #f4f5ff;
  --background-quaternary: #f2f4f5;
  --background-primary-inverse: #32364d;
  --background-secondary-inverse: #515468;
  --background-tertiary-inverse: #60637a;
  --background-quaternary-inverse: #7b7e88;

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

  // border
  --border-primary: #dce1e6;
  --border-secondary: #b4b4b4;
  --border-tertiary: #717483;
  --border-primary-inverse: #4d505f;
  --border-secondary-inverse: #555c74;

  // primary
  --primary: #4a58fb;
  --on-primary: #ffffff;
  --primary-medium: #b5bbf4;
  --primary-light: #eaf1fb;
  --primary-inverse: #c4e8fd;

  // secondary or accent
  --secondary: #eef0f9;
  --on-secondary: #4f515b;
  --secondary-medium: #e9ebf9;
  --secondary-light: #e9ebf9;

  // error or negative
  --error: #f2202e;
  --on-error: #ffffff;
  --error-medium: #f5d4d1;
  --error-light: #fcf2f1;

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

  // warning
  --warning: #dc6803;
  --on-warning: #ffffff;
  --warning-medium: #ffecdb;
  --warning-light: #fbf0e6;

  // information
  --information: #4756ff;
  --on-information: #ffffff;
  --information-medium: #dde1ff;
  --information-light: #eef4fe;

  // success or positive
  --success: #32936f;
  --on-success: #ffffff;
  --success-medium: #adf0c8;
  --success-light: #d9f7e5;

  --star: #fec200;

  // shadow
  --shadow-primary: 0 0 20px rgba(0, 0, 0, 0.6);
  --popup-shadow: 0 4px 10px rgba(0, 0, 0, 0.19);

  // overlay
  --overlay-light: rgba(0, 0, 0, 0.3);
  --overlay-dark: rgba(0, 0, 0, 0.7);

  // 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);
  --layout-radius: 20px;

  // 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: #ffffff;
  --input-default-border: #b4b4b4;
  --input-default-color: #4d505f;

  --input-focus-background: #ffffff;
  --input-focus-border: #4a58fb;
  --input-focus-color: #4d505f;

  --input-error-background: #ffffff;
  --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: #b4b4b4;
  --input-readonly-color: #4d505f;

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

  --header-height: 44px;
  --header-button-height: 34px;
}