:root {
  color-scheme: dark;
  --s-primary: #0f0f14;
  --s-raised: #1a1a24;
  --s-overlay: #22222e;
  --s-sunken: #0a0a0f;
  --s-accent: #1e1245;
  --ink-primary: #f0f0f5;
  --ink-secondary: #a0a0b0;
  --ink-tertiary: #6b6b80;
  --ink-muted: #44445a;
  --ink-inverse: #0f0f14;
  --ink-brand: #8480ff;
  --line-default: #2a2a3a;
  --line-subtle: #1e1e2a;
  --line-strong: #3a3a4a;
  --line-focus: #6c63ff;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-float: rgba(0, 0, 0, 0.6);
}

.light {
  color-scheme: light;
  --s-primary: #ffffff;
  --s-raised: #f8f8fb;
  --s-overlay: #ffffff;
  --s-sunken: #f0f0f5;
  --s-accent: #f0f0ff;
  --ink-primary: #111118;
  --ink-secondary: #555566;
  --ink-tertiary: #888899;
  --ink-muted: #bbbbcc;
  --ink-inverse: #ffffff;
  --ink-brand: #6c63ff;
  --line-default: #e2e2ea;
  --line-subtle: #f0f0f5;
  --line-strong: #d0d0da;
  --line-focus: #6c63ff;
  --shadow-color: rgba(0, 0, 0, 0.06);
  --shadow-float: rgba(0, 0, 0, 0.1);
}

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

a,
button,
input,
textarea,
select {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

:focus-visible {
  outline: 2px solid var(--line-focus);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-default);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--line-strong);
}

::selection {
  background: rgba(108, 99, 255, 0.3);
}