:root {
  --color-primary: #ab4abb;
  --color-primary-bg: rgba(171, 74, 187, 0.2);
  --color-secondary: #0f1428;
  --color-brand: var(--color-primary);
  --color-progress: #1f69c9;
  --color-success: #008237;
  --color-success-bg: rgba(0, 130, 55, 0.2);
  --color-warning: #b95600;
  --color-warning-bg: rgba(185, 86, 0, 0.2);
  --color-error: #c01a1a;
  --color-error-bg: rgba(192, 26, 26, 0.2);
  --color-canceled: #0f1428;
  --color-paused: #826d29;
  --color-info: #3e83dd;
  --color-info-bg: rgba(62, 131, 221, 0.2);
  --color-low: #3dba41;
  --color-medium: #ffc000;
  --color-high: #ce3939;
  --color-critical: #920000;
  --color-unknown: #a5b1cd;
  --color-code: #e8eaf2;
  --color-white: #fff;
  --color-gray-100: #f9f9fa;
  --color-gray-200: #f5f5f6;
  --color-gray-300: #efeff1;
  --color-gray-400: #e8eaf2;
  --color-gray-500: #d6d7dc;
  --color-gray-600: #cccfde;
  --color-gray-700: #707485;
  --color-gray-800: #5c6173;
  --color-gray-900: #333950;
  --color-gray-1000: #0f1428;
  --color-black: #000;
  --color-border: var(--color-gray-500);
  --color-shadow: rgba(51, 57, 80, 0.2);
  --md-primary-fg-color: var(--color-primary);
  --md-header-bg-color: var(--color-secondary);
}

[data-md-color-accent="purple"] {
  --md-accent-fg-color: #713a83;
}