:root {
  --msem-color-primary: #1895bd;
  --msem-color-secondary: #0e608a;
  --msem-color-primary-gradient: #1895bd;
  --msem-color-primary-dark: #0e608a;

  --msem-color-lightest: #fff;
  --msem-color-lighter: #f8f8f8;
  --msem-color-light: #ededed;

  --msem-color-mediumlight: #d7d7d7;
  --msem-color-medium: #9d9d9d;
  --msem-color-mediumdark: #7c7b7b;

  --msem-color-dark: #4d4d4d;
  --msem-color-darker: #262626;
  --msem-color-darkest: #000;

  --msem-color-transparent: rgba(255, 255, 255, 0);
  --msem-color-error: #ff5722;
  --msem-color-error-light: hsl(8deg 93% 97%);
  --msem-color-available: #26d962;
  --msem-color-success-light: hsl(128deg 93% 97%);
  --msem-color-unavailable: #c20809;
  --msem-color-gold: #a89160;

  --msem-fontsize-huge: 30px;
  --msem-fontsize-massive: 24px;
  --msem-fontsize-bigger: 20px;
  --msem-fontsize-big: 18px;
  --msem-fontsize-medium: 16px;
  --msem-fontsize-crisp: 15px;
  --msem-fontsize-normal: 14px;
  --msem-fontsize-small: 13px;
  --msem-fontsize-smaller: 12px;
  --msem-fontsize-tiny: 11px;
  --msem-fontsize-tinier: 10px;

  --msem-fontweight-normal: 400;
  --msem-fontweight-bold: 700;

  --msem-focusring:
    0 0 0 2px var(--msem-color-secondary),
    inset 0 0 0 1px var(--msem-color-lightest);

  --msem-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.5);
  --msem-shadow-light: 0 6px 12px -10px rgba(10, 47, 92, 0.4);
  --msem-shadow-widget: 0 25px 80px rgba(0, 0, 0, 0.5);
  --msem-shadow-dialog: 0 10px 30px rgba(0, 0, 0, 0.25);

  --msem-filters-map: grayscale(1) brightness(1.1);
  --msem-filters-image: none;

  --msem-box-input:
    inset 0 2px 2px -1px rgba(135, 173, 197, 0.2), 0 0 0 1px #d1d8e0;
  --msem-box-card: 0 6px 12px -10px rgba(25, 48, 77, 0.4), 0 0 0 1px #f0f3f5;
}
