:root {
  --color-black:            #000000;
  --color-black-alpha-80:   rgba(0, 0, 0, 0.80);
  --color-black-alpha-60:   rgba(0, 0, 0, 0.60);
  --color-black-alpha-40:   rgba(0, 0, 0, 0.40);
  --color-black-alpha-20:   rgba(0, 0, 0, 0.20);
  --color-black-alpha-12:   rgba(0, 0, 0, 0.12);
  --color-black-alpha-08:   rgba(0, 0, 0, 0.08);
  --color-black-alpha-04:   rgba(0, 0, 0, 0.04);
  --color-black-alpha-02:   rgba(0, 0, 0, 0.02);

  --color-white:            #ffffff;
  --color-white-alpha-80:   rgba(255, 255, 255, 0.80);
  --color-white-alpha-60:   rgba(255, 255, 255, 0.60);
  --color-white-alpha-40:   rgba(255, 255, 255, 0.40);
  --color-white-alpha-20:   rgba(255, 255, 255, 0.20);
  --color-white-alpha-12:   rgba(255, 255, 255, 0.12);
  --color-white-alpha-08:   rgba(255, 255, 255, 0.08);
  --color-white-alpha-04:   rgba(255, 255, 255, 0.04);

  --color-gray-900: #111111;
  --color-gray-800: #1e1e1e;
  --color-gray-700: #383838;
  --color-gray-600: #444444;
  --color-gray-500: #757575;
  --color-gray-400: #999999;
  --color-gray-300: #b3b3b3;
  --color-gray-200: #d9d9d9;
  --color-gray-150: #e6e6e6;
  --color-gray-100: #f5f5f5;
  --color-gray-50:  #fafafa;

  --color-sky-900: #093077;
  --color-sky-800: #034ac1;
  --color-sky-700: #0768cf;
  --color-sky-600: #007be5;
  --color-sky-500: #0d99ff;
  --color-sky-400: #80caff;
  --color-sky-300: #bde3ff;
  --color-sky-200: #e5f4ff;
  --color-sky-150: #ecf7ff;
  --color-sky-100: #f2f9ff;
  --color-sky-50:  #f8fcff;

  --color-red-900: #771208;
  --color-red-800: #9f1f18;
  --color-red-700: #bd2915;
  --color-red-600: #dc3412;
  --color-red-500: #f24822;
  --color-red-400: #ffafa3;
  --color-red-300: #ffc7c2;
  --color-red-200: #ffe2e0;
  --color-red-150: #ffeceb;
  --color-red-100: #fff5f5;
  --color-red-50:  #fffafa;

  --color-violet-900: #4f1d7b;
  --color-violet-800: #6c20a9;
  --color-violet-700: #852bcd;
  --color-violet-600: #9642e2;
  --color-violet-500: #a966ee;
  --color-violet-400: #c18bff;
  --color-violet-300: #ddc4ff;
  --color-violet-200: #f0e2ff;
  --color-violet-150: #f5efff;
  --color-violet-100: #f9f4ff;
  --color-violet-50:  #fcfaff;

  --color-bg-default:   var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary:  var(--color-gray-100);
  --color-bg-hover:     var(--color-black-alpha-04);
  --color-bg-pressed:   var(--color-black-alpha-08);
  --color-bg-accent:        var(--color-violet-500);
  --color-bg-accent-subtle: var(--color-violet-200);
  --color-bg-overlay:   var(--color-black-alpha-60);
  --color-bg-overlay-blur: rgba(255, 255, 255, 0.88);
  --color-bg-primary:   var(--color-gray-900);
  --color-bg-inverse:   var(--color-gray-900);
  --color-bg-critical:          var(--color-red-600);
  --color-bg-critical-subtle:   var(--color-red-200);
  --color-bg-brand-subtle:      var(--color-violet-200);

  --color-text-default:   var(--color-gray-800);
  --color-text-secondary: var(--color-gray-500);
  --color-text-tertiary:  var(--color-gray-300);
  --color-text-accent:    var(--color-violet-600);
  --color-text-onaccent:  var(--color-white);
  --color-text-onprimary: var(--color-white);
  --color-text-oninverse: var(--color-white);
  --color-text-link:      var(--color-sky-700);
  --color-text-critical:     var(--color-red-600);
  --color-text-oncritical:   var(--color-white);
  --color-text-brand:        var(--color-violet-400);

  --color-border-subtle:  var(--color-gray-100);
  --color-border-default: var(--color-gray-200);
  --color-border-strong:  var(--color-gray-400);
  --color-border-accent:  var(--color-violet-600);
  --color-border-critical: var(--color-red-600);

  --color-border-overlay: var(--color-black-alpha-02);

  --color-icon-default:   var(--color-gray-700);
  --color-icon-secondary: var(--color-gray-500);
  --color-icon-tertiary:  var(--color-gray-300);
  --color-icon-accent:    var(--color-violet-500);
  --color-icon-onaccent:  var(--color-white);
  --color-icon-onprimary: var(--color-white);
  --color-icon-oninverse: var(--color-white);
  --color-icon-critical:  var(--color-red-600);

  --blur-overlay: 24px;
}