:root {
  --color-pink: light-dark(#ff55ff, #f999f9);
  --color-yellow: #ffff99;
  --color-secondary: light-dark(#6666ff, #9999ff);
  --color-fg-highlight: var(--color-yellow);
  --color-fg-highlight-tertiary: light-dark(#1f3f8a,#bbeeff);
  --color-fg-highlight-secondary: light-dark(#229944,#77dd77);
  --color-bg-highlight: light-dark(#efefff,#14151a);
  --color-bg-default: light-dark(#f5f5ff,#0a0d10);
  --color-fg-contrast: light-dark(#232563,#f9f9fb);
  --color-fg-low-contrast: light-dark(#434583,#d9d9db); /* TODO: tweak this */
  --color-fg-dim: light-dark(#5a5a7a,#9b9bb1);
  --color-fg-emphasized: #7070ff;
  --color-fg-match-background: light-dark(#f5f5ff,#0a0d10);
  --color-fill-secondary: #7070ff;
  --color-fill-separator: light-dark(#dbdbff,#24252d);
  --color-fill-ghost: light-dark(#EBEBFF,#24252d);
  --color-border-hint: light-dark(#DBDBFF,#24252d);
  --color-border-focus: #8585ff;
  --color-border-default: var(--color-fg-dim);
  --color-selection: light-dark(var(--color-fg-contrast),var(--color-bg-default));
}

::selection {
  color: var(--color-selection);
  background-color: var(--color-yellow);
}

* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-family-default), sans-serif;
  color: var(--color-fg-contrast);
}

body {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  background-color: var(--color-bg-default);
}

body, html {
  height: 100%;
}

#toggle-theme {
  border: none;
  color: var(--color-fg-contrast);
  padding: 0;
  width: fit-content;
  height: fit-content;
  border-radius: 0.25rem;
  cursor: pointer;
  background-color: transparent;
  background-size: contain;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
  #dark-label {
    display: none;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
  #light-label {
    display: none;
  }
}

:root:has(#light:checked) {
  color-scheme: light;
}

:root:has(#dark:checked) {
  color-scheme: dark;
}

:root:has(#dark:checked) #light-label,
:root:has(#light:checked) #dark-label {
  display: block;
  margin-left: auto;
}

:root:has(#dark:checked) #dark-label,
:root:has(#light:checked) #light-label {
  display: none;
}

#theme {
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-fg-default);
  text-align: right;
}

#theme label:first-child {
  margin-left: auto;
}

#theme label {
  width: auto;
  border: 0;
  margin: 0;
  padding: 0;
}

#theme input {
  display: none;
}