:root {
  color-scheme: dark;
  --card-bg: #151A23;
  --header-bg: rgba(18, 22, 30, 0.92);
  --sel-ink: #FFFFFF;
  --eye-arc: #8F9CAC;
  --eye-blue: #3E9BF0;
  --eye-blue-light: #5FBEFF;
  --eye-pupil: #FFFFFF;
  --eye-arc-dim: #5A6675;
  --eye-pupil-dim: #EEF1F5;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #FDFDFC;
  --bg-alt: #F1F3F7;
  --card-bg: #FFFFFF;
  --bg-hover: #F7F9FC;
  --ink: #232A34;
  --ink-strong: #12161E;
  --ink-2: #3E4855;
  --ink-3: #55606E;
  --ink-4: #5F6B79;
  --ink-5: #5F6B79;
  --ink-6: #626F7E;
  --accent: #1D70BF;
  --accent-light: #1A63AD;
  --accent-lighter: #0F4B87;
  --rule: rgba(18, 22, 30, 0.10);
  --rule-2: rgba(18, 22, 30, 0.12);
  --rule-3: rgba(18, 22, 30, 0.16);
  --rule-4: rgba(18, 22, 30, 0.18);
  --card-rule: rgba(18, 22, 30, 0.09);
  --header-bg: rgba(253, 253, 252, 0.92);
  --sel-ink: #FFFFFF;
  --eye-arc: #6E7C8C;
  --eye-blue: #2C86D8;
  --eye-blue-light: #3E9BF0;
  --eye-pupil: #12161E;
  --eye-arc-dim: #98A3B0;
  --eye-pupil-dim: #2A323D;
}

.eye-top { stroke: var(--eye-arc); }
.eye-bottom { stroke: var(--eye-blue); }
.eye-top-soft { stroke: var(--eye-arc); }
.eye-bottom-soft { stroke: var(--eye-blue-light); }
.eye-pupil { fill: var(--eye-pupil); }
.eye-dim-top { stroke: var(--eye-arc-dim); }
.eye-dim-bottom { stroke: var(--eye-blue); }
.eye-dim-pupil { fill: var(--eye-pupil-dim); }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  margin: -7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease;
}
.theme-toggle:hover { background: var(--rule-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }