:root {
  --gray0: #E2E2E2;
  --gray1: #C4C5C5;
  --gray2: #A7A7A8;
  --gray3: #8A8A8B;
  --gray4: #6C6D6E;
  --gray5: #4F5051;
  --gray6: #313234;
  --gray7: #141517;

  --accent0: #1EB1EB;
  --accent1: #1681AB;
  --accent2: #15779E;
  --accent3: #116485;
  --accent4: #0C475E;
}

.light {
  --text-primary: var(--gray1);
  --text-secondary: var(--gray0);

  --background: var(--gray1);
  --bg-primary: var(--gray5);
  --bg-secondary: var(--gray6);

  --nav-svg-primary: var(--accent1);
  --nav-svg-secondary: var(--accent2);
  
  --nav-svg-active-primary: var(--accent0);
  --nav-svg-active-secondary: var(--accent1);

  --scrollbar-color:  var(--gray6);
  --scrollbar-thumb:  var(--accent2);
}

.dark {
  --text-primary: var(--gray3);
  --text-secondary: var(--gray2);

  --background: var(--gray5);
  --bg-primary: var(--gray6);
  --bg-secondary: var(--gray7);

  --nav-svg-primary: var(--accent2);
  --nav-svg-secondary: var(--accent3);

  --nav-svg-active-primary: var(--accent1);
  --nav-svg-active-secondary: var(--accent2);

  --scrollbar-color:  var(--gray7);
  --scrollbar-thumb:  var(--accent4);
}