:root {
  /* Typography */
  --font-family-sans: Lato, sans-serif;
  --font-family-icon: wpass;
  --font-size-2xs: 9px;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --line-height-tight: 14px;
  --line-height-sm: 16px;
  --line-height-md: 18px;
  --line-height-base: normal;
  --line-height-lg: 20px;
  --line-height-xl: 24px;
  --letter-spacing-normal: normal;

  /* Colors */
  --color-app-background: rgb(239, 243, 246);
  --color-page-background: rgb(45, 44, 51);
  --color-surface: rgb(255, 255, 255);
  --color-surface-secondary: rgba(153, 157, 168, 0.1);
  --color-surface-dark: rgb(67, 66, 77);
  --color-text-primary: rgb(45, 44, 51);
  --color-text-secondary: rgba(45, 44, 51, 0.7);
  --color-text-muted: rgb(153, 157, 168);
  --color-text-muted-soft: rgba(153, 157, 168, 0.7);
  --color-text-inverse: rgb(255, 255, 255);
  --color-border: rgb(230, 234, 238);
  --color-border-muted: rgba(153, 157, 168, 0.4);
  --color-hover: rgba(66, 133, 244, 0.05);
  --color-selected: rgb(66, 133, 244);
  --color-focus: rgb(66, 133, 244);
  --color-primary: rgb(50, 167, 84);
  --color-danger: rgb(255, 95, 95);
  --color-warning: rgb(255, 170, 0);
  --color-success: rgb(50, 167, 84);
  --color-info: rgb(66, 133, 244);
  --color-status-purple: rgb(127, 101, 241);
  --color-status-pink: rgb(240, 98, 146);
  --color-status-steel: rgb(103, 121, 168);

  /* Spacing */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 5px;
  --space-4: 6px;
  --space-5: 8px;
  --space-6: 10px;
  --space-7: 14px;
  --space-8: 18px;
  --space-9: 20px;

  /* Sizing */
  --size-shell-bar-height: 60px;
  --size-control-height-sm: 30px;
  --size-control-height-md: 36px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-action-sm: 30px;
  --size-icon-action-md: 36px;
  --size-hit-area-sm: 30px;
  --size-hit-area-md: 36px;

  /* Borders */
  --border-width: 1px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-none: none;
  --shadow-dropdown: rgba(1, 1, 1, 0.15) 0 0 6px 0;
  --shadow-menu: rgba(1, 1, 1, 0.15) 0 0 6px 0;
  --shadow-dialog: rgba(1, 1, 1, 0.15) 0 0 6px 0;

  /* Layers */
  --z-index-base: 0;
  --z-index-raised: 1;
  --z-index-sticky: 100;
  --z-index-dropdown: 300;
  --z-index-overlay: 600;
  --z-index-modal: 800;
  --z-index-tooltip: 900;
}