@theme {
  /* these colors are specific to THERMS UI */
  /* Background --- */
  --color-background: #fff;

  /* Border --- */
  --color-border: #d4dadd;

  /* Surface --- */
  --color-surface-subtle: #f0f2f2;
  --color-surface: #e8ebed;
  --color-surface-strong: #dee1e3;

  /* Text --- */
  --color-text-subtle: #00111a73;
  --color-text: #00111abf;
  --color-text-strong: #00111af2;
  --color-text-semantic: #fff;

  /* Semantic */
  --color-main-dark: #042959;
  --color-main: #0c4494;
  --color-main-light: #335ea2;
  --color-main-faded: #215093;

  --color-neutral-dark: #819498;
  --color-neutral: #8fa0a3;
  --color-neutral-light: #c6cfd2;
  --color-neutral-faded: #8fa0a366;

  --color-positive-dark: #196645;
  --color-positive: #2eb87c;
  --color-positive-light: #70dbad;
  --color-positive-faded: #2eb87c66;

  --color-caution-dark: #bd7f00;
  --color-caution: #f9b21f;
  --color-caution-light: #ffc857;
  --color-caution-faded: #f9b21f66;

  --color-critical-dark: #b83314;
  --color-critical: #e5401a;
  --color-critical-light: #ff8366;
  --color-critical-faded: #e5401a66;

  --color-info-dark: #1c9c9c;
  --color-info: #26d9d9;
  --color-info-light: #7de8e8;
  --color-info-faded: #26d9d966;

  /* Scrollbar */
  --color-scrollbar-track: #d4d9d9;
  --color-scrollbar-thumb: #afb3b3;
  --color-scrollbar-thumb-highlight: #bbbfbf;

  /* Input */
  --color-input-background: #ccd5d7;
  --color-input-background-disabled: #c9cacf;
}
