/*********
 # COLORS
 *********/

:root {
  --gray1: rgb(14 16 27);
  --gray2: rgb(28 33 49);
  --gray3: rgb(52 59 82);
  --gray4: rgb(87 94 120);
  --gray5: rgb(138 144 166);
  --gray6: rgb(200 204 217);
  --gray7: rgb(249 251 255);

  --light-blue: rgb(69 212 243);
  --blue: rgb(28 168 239);
  --dark-blue: rgb(63 46 231);
  --lilac: rgb(187 121 245);
  --purple: rgb(197 141 244);

  color-scheme: light dark;
}

@media screen and (prefers-color-scheme: light) {
  :root {
    --background-color: var(--gray7);
    --hr-color: var(--gray1);
    --text-color-primary: var(--gray1);
    --text-color-secondary: var(--gray4);
    --text-color-light: var(--gray5);
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--gray1);
    --hr-color: var(--gray7);
    --text-color-primary: var(--gray7);
    --text-color-secondary: var(--gray5);
    --text-color-light: var(--gray4);
  }
}

:root {
  --background-color: light-dark(var(--gray7), var(--gray1));
  --hr-color: var(--text-color-secondary);
  --text-color-primary: light-dark(var(--gray1), var(--gray7));
  --text-color-secondary: light-dark(var(--gray4), var(--gray5));
  --text-color-light: light-dark(var(--gray5), var(--gray4));
}

:root[color-scheme="dark"] {
  color-scheme: only dark;
}

:root[color-scheme="light"] {
  color-scheme: only light;
}

body {
  background-color: var(--background-color);
  color: var(--text-color-primary);
}

hr {
  border: 0;
  border-bottom: 2px dashed var(--hr-color);
  color: var(--hr-color);
  width: 100%;
}