:root {
  --color-primary: #0078d4;
  --color-primary-hover: #106ebe;
  --color-primary-selected: #005a9e;
  --color-primary-disabled: #97cdfb;
  --color-primary-text: var(--color-white);

  --color-primary-light: rgba(226, 235, 246, 0.5);
  --color-primary-light-hover: rgba(226, 236, 246, 0.5);
  --color-primary-light-selected: rgba(130, 184, 217, 0.5);

  --color-tertiary: #6b7573;
  --color-tertiary-hover: #889290;
  --color-tertiary-selected: #586260;
  --color-tertiary-disabled: #c6cdcb;

  --color-tertiary-light: rgba(249, 249, 249, 0.5);
  --color-tertiary-light-hover: rgba(230, 234, 233, 0.5);
  --color-tertiary-light-selected: rgba(198, 205, 203, 0.5);

  --color-info: #0078f6;
  --color-info-hover: #3296f8;
  --color-info-selected: #0063d2;
  --color-info-disabled: #97cdfb;

  --color-disabled-bg: #e6eae9;
  --color-disabled-text: #c6cdcb;
  --color-disabled-border: #e6eae9;

  --color-danger: #f53020;
  --color-danger-hover: #f75e4b;
  --color-danger-light: rgba(254, 241, 237, 0.5);
  --color-danger-light-hover: rgba(253, 218, 209, 0.5);
  --color-danger-light-selected: rgba(251, 179, 164, 0.5);

  --color-warning: #e97500;
  --color-warning-hover: #f99d32;
  --color-warning-selected: #cf5e00;
  --color-warning-light: rgba(251, 242, 205, 0.5);
  --color-warning-light-hover: rgba(247, 226, 157, 0.5);
  --color-warning-light-selected: rgba(244, 207, 110, 0.5);

  --color-success: #309536;
  --color-success-hover: #3bb340;
  --color-success-selected: #25772b;
  --color-success-disabled: #a5e1a4;
  --color-success-light: rgba(236, 247, 236, 0.5);
  --color-success-light-hover: rgba(208, 240, 208, 0.5);
  --color-success-light-selected: rgba(165, 225, 164, 0.5);

  --color-white: #fff;
  --color-black: #000;
  --color-text-0: #222726;
  --color-text-1: #464e4d;
  --color-text-2: #6b7573;
  --color-text-3: #889290;

  --color-border-0: #f5f5f5;
  --color-border-1: #d1d1d6;
  --color-border-error: var(--color-danger);
  --color-border-hover: #bdecde;
  --color-border-active: var(--color-primary);

  --color-overlay-bg: rgba(22, 22, 26, 0.6);

  --color-bg-0: var(--color-white);
  --color-bg-1: #f9f9f9;
  --color-bg-2: #e8e8e8;

  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 20px;
  --border-radius-lg: 28px;
  --border-radius-circle: 50%;

  --color-shadow-0: rgba(0, 0, 0, 0.02);
  --color-shadow-1: rgba(0, 0, 0, 0.06);
  --color-shadow-2: rgba(0, 0, 0, 0.1);
  --color-shadow-3: rgba(0, 0, 0, 0.3);

  --shadow-highlight:
    0 0 1px 0 var(--color-shadow-3), 0 16px 16px 0 var(--color-shadow-1);
  --shadow-medium: 0px 8px 8px 0px var(--color-shadow-0);

  --width-sidebar: 240px;
  --height-header: 64px;

  --font-size-xs: 0.625rem; /* 10px */
  --font-size-sm: 0.75rem; /* 12px */
  --font-size-md: 0.875rem; /* 14px */
  --font-size-lg: 1rem; /* 16px */
  --font-size-xl: 1.125rem; /* 18px */
  --font-size-2xl: 1.25rem; /* 20px */
  --font-size-3xl: 1.5rem; /* 24px */
  --font-size-4xl: 1.75rem; /* 28px */
  --font-size-5xl: 2rem; /* 32px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  --z-index-dialog: 1400;
  --z-index-message: 1500;
}
