:root {
  --color-pink: #ff55ff;
  --color-yellow: #ffff99;
  --color-secondary: #6666ff;
  --color-fg-highlight: var(--color-yellow);
  --color-fg-highlight-tertiary: #1f3f8a;
  --color-fg-highlight-secondary: #229944;
  --color-bg-highlight: #efefff;
  --color-bg-default: #f5f5ff;
  --color-fg-contrast: #232563;
  --color-fg-low-contrast: #434583; /* TODO: tweak this */
  --color-fg-dim: #5a5a7a;
  --color-fg-emphasized: #7070FF;
  --color-fg-match-background: #f5f5ff;
  --color-fill-secondary: #7070FF;
  --color-fill-separator: #dbdbff;
  --color-fill-ghost: #EBEBFF;
  --color-border-hint: #DBDBFF;
  --color-border-focus: #8585FF;
  --color-border-default: var(--color-fg-dim);
  --color-selection: var(--color-fg-contrast);
}

:root[data-theme="dark"] {
  --color-pink: #f999f9;
  --color-yellow: #ffff99;
  --color-secondary: #9999ff;
  --color-fg-highlight: var(--color-yellow);
  --color-fg-highlight-tertiary: #bbeeff;
  --color-fg-highlight-secondary: #77dd77;
  --color-bg-highlight: #14151a;
  --color-bg-default: #0a0d10;
  --color-fg-contrast: #f9f9fb;
  --color-fg-low-contrast: #d9d9db; /* TODO: tweak this */
  --color-fg-dim: #9b9bb1;
  --color-fg-emphasized: #7070ff;
  --color-fg-match-background: #0a0d10;
  --color-fill-secondary: #7070ff;
  --color-fill-separator: #24252d;
  --color-fill-ghost: #24252d;
  --color-border-hint: #24252d;
  --color-border-focus: #8585ff;
  --color-selection: 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;
}
:root[data-theme=light] #toggle-theme {
  background-image: url(/assets/images/sun.svg);
}
:root[data-theme=dark] #toggle-theme {
  background-image: url(/assets/images/moon.svg);
}