html {
  background: hsla(207, 9%, 31%, 1);
  color-scheme: dark;

  --primary-color: hsla(207, 87%, 40%, 1);
  --primary-color-light-1: hsla(207, 97%, 36%, 1);
  --primary-color-light-0: hsla(207, 20%, 65%, 1);
  --gray-0: #666;
  --gray-1: #919191;
  --black: #0a0a0a;

  --text-color: #fefefe;
  --text-color-inverse: #999;

  --surface-0: hsla(207, 9%, 31%, 1);
  --surface-1: hsla(207, 7%, 56%, 1);
  --surface-2: hsla(207, 7%, 60%, 1);
  --surface-3: hsla(207, 4%, 70%, 1);

  --border-color: #868e96v;

  --shadow-0: 0 2px 4px rgb(0 0 0 / 25%);
  --shadow-1: 0 4px 4px rgb(0 0 0 / 25%);


  --alert-color: #cc4b37;
  --caution-color: #f2c962;
  --success-color: #4caf50;
  --inactive-color: #808080;
  --disabled-color: #343a40;

  --font-family: Helvetica, Arial, sans-serif;

  --dt-form-border-color: var(--border-color);
  --dt-form-border-color-alert: var(--alert-color);
  --dt-form-background-color: var(--surface-3);
  --dt-form-disabled-background-color: var(--disabled-color);
  --dt-form-text-color: var(--text-color);
  --dt-form-text-color-inverse: var(--text-color-inverse);
  --dt-form-text-border-color: var(--border-color);

  --dt-checkmark-width: 3px;
  --dt-checkmark-color: var(--success-color);

  --dt-connection-icon-fill: var(--primary-color);
  --dt-multi-select-text-color: var(--text-color);
  --dt-multi-select-background-color: var(--surface-3);
  --dt-multi-select-tag-border-color: var(--primary-color-light-1);
  --dt-multi-select-tag-background-color: var(--primary-color-light-0);
  --dt-multi-select-option-hover-background: var(--surface-2);

  --dt-single-select-text-color: var(--dt-form-text-color);
  --dt-single-select-text-color-inverse: var(--dt-form-text-color-inverse);

  --dt-text-color: var(--dt-form-text-color);
  --dt-text-color-inverse: var(--dt-form-text-color-inverse);
  --dt-text-background-color: var(--dt-form-background-color);
  --dt-text-border-color: var(--dt-form-border-color);
  --dt-text-border-color-alert: var(--dt-form-border-color-alert);
  --dt-text-disabled-background-color: var(--dt-form-disabled-background-color);
  --dt-text-border-radius: 0;
  --dt-text-box-shadow: var(--dt-form-box-shadow);
  --dt-text-placeholder-color: var(--dt-text-placeholder-color);
  --dt-text-placeholder-text-transform: none;
  --dt-text-placeholder-font-size: var(--dt-text-placeholder-font-size);
  --dt-text-placeholder-font-weight: var(--dt-text-placeholder-font-weight);
  --dt-text-placeholder-letter-spacing: var(--dt-text-placeholder-letter-spacing);

  --dt-textarea-border-color: var(--dt-form-border-color);
  --dt-textarea-background-color: var(--dt-form-background-color);
  --dt-textarea-disabled-background-color: var(--dt-form-disabled-background-color);
  --dt-textarea-text-color: var(--dt-form-text-color);
  --dt-textarea-text-color-inverse: var(--dt-form-text-color-inverse);

  --dt-label-font-size: 14px;
  --dt-label-font-weight: 700;
  --dt-label-tooltip-color: var(--gray-0);
  --dt-label-tooltip-background: var(--surface-2);

  --dt-spinner-color-1: var(--gray-1);
  --dt-spinner-color-2: var(--black);
  --dt-tile-font-family: var(--font-family);

  --dt-toggle-background-color-on: var(--primary-color);
  --dt-toggle-background-color-off: var(--surface-3);
  --dt-toggle-icon-success: var(--success-color);
  --dt-toggle-icon-alert: var(--alert-color);


  --dt-tile-font-size: 14px;
  --dt-tile-font-weight: 700;
  --dt-tile-background-color: var(--surface-1);
  --dt-tile-border-color: var(--border-color);
  --dt-tile-shadow: var(--shadow-0);
  --dt-tile-header-color: var(--text-color);
  --dt-tile-margin: 0 0 10px 0;
  --dt-tile-header-font-weight: 300;

  --dt-alert-text-color-light: #fff;
  --dt-alert-text-color-dark: #000;
  --dt-alert-text-color: var(--text-color);
  --dt-alert-font-family: var(--font-family);
  --dt-alert-font-size: 14px;
  --dt-alert-font-weight: 700;
  --dt-alert-background-color: var(--surface-1);
  --dt-alert-border-color: var(--border-color);
  --dt-alert-shadow: var(--shadow-0);

  --dt-list-font-size: var(--font-size);
  --dt-list-font-weight: var(--font-weight);
  --dt-list-line-height: var(--line-height);
  --dt-list-border-color: var(--border-color);
  --dt-list-action-section-background-color: var(--primary-color-light-0, #ecf5fc);
  --dt-list-header-color: var(--dt-list-header-color, #0a0a0a);
  --dt-list-background-color: var(--dt-tile-background-color, #fefefe);
  --dt-list-sort-arrow-color: var(--dt-list-sort-arrow-color, #808080);
  --dt-list-sort-arrow-color-highlight: var(--primary-color, #3f729b);
  --dt-list-header-color: var(--dt-list-header-color, #0a0a0a);
  --dt-list-link-color: var(--primary-color, #3f729b);

  --dt-modal-background-color: var(--dt-modal-background-color, #fff);
  --dt-modal-color: var(--dt-modal-color, #000);
  --dt-modal-button-color: var(--text-color-inverse, #fff);
  --dt-modal-button-background: var(--primary-color, #3f729b);
  --dt-modal-button-opener-color: var(--text-color-inverse, #fff);
  --dt-modal-button-opener-background: var(--primary-color, #3f729b);

  --dt-button-text-color-dark: var(--dt-button-text-color-dark);
}