:root {
  --color-000: transparent;
  --color-100: #FFFFFF !important;
  --color-200: #c0e4f7 !important;
  --color-300: #7CB5D2 !important;
  --color-400: #0097CC !important;
  --color-500: #0D7FA9 !important;
  --color-600: #0B7197 !important;
  --color-700: #136B8C !important;
  --color-800: #135E8E !important;
  --color-900: #11547E !important;
  --color-1000: #044C75 !important;

  --toolbar-top-color: var(--color-700);
  --toolbar-bottom-color: var(--color-700);
  --toolbar-buttons-color: white !important;

  --text-color: var(--color-100);
  --text-color-card-legend: var(--color-1000);
  --text-color-card-no-legend: var(--color-1000);
  --text-color-lane-title: var(--color-100);
  --text-color-button-add: white;
  --icons-color: var(--color-100);

  --current-line-color: #FFFF00;
  --preview-live-color: #FF0A0A;

  --preset-color-light: var(--color-900);
  --preset-color-dark: var(--color-1000);

  --scroll-light: var(--color-900);
  --scroll-dark: var(--color-1000);

  --modal-color: var(--color-400);
  --modal-btn-color: var(--color-600);
  --modal-text-color: var(--color-100);
}