/* v 1.0 */
:root {
  --black: #000000;
  --white: #fff;
  --dim: #b3b3b3;
  --card-black: #131313;
  --card-white: #eeeeee;
  --special-text: #09a0ff;
  --special-bg: #013f66;
  --placeholder: gray;
  --border-dim: rgb(202, 202, 202);
}

@media (prefers-color-scheme: dark) {
  /* Your dark theme styles go here */
  body {
    --bg: var(--black);
    --text: var(--white);
    --card-bg: var(--card-black);
    --border-dim: rgb(65, 65, 65);
    --special-text: #008ae0;
  }
}

@media (prefers-color-scheme: light) {
  /* Your dark theme styles go here */
  body {
    --bg: var(--white);
    --text: var(--black);
    --card-bg: var(--card-white);
    --dim: #5f5f5f;
    --border-dim: rgb(202, 202, 202);
    --special-bg: #5dc1ff;
  }
}

body.dark-theme {
  --bg: var(--black);
  --text: var(--white);
  --card-bg: var(--card-black);
  --border-dim: rgb(65, 65, 65);
}

body.light-theme {
  --bg: var(--white);
  --text: var(--black);
  --card-bg: var(--card-white);
  --dim: #5e5e5e;
  --border-dim: rgb(202, 202, 202);
  --special-bg: #5dc1ff;
}