/* Dartmouth Green theme overrides for both light and dark modes. */

:root {
  --link-color: #00693e;
  --link-hover-color: #004f2d;
  --border-color: #00693e;
  --collapse-hover: #dceee3;
  --theme-toggle-track: #b7ddc5;
  --theme-toggle-track-active: #00693e;
  --theme-toggle-icon-color: #00693e;
  --theme-toggle-thumb: #ffffff;
  --focus-ring-color: #00693e;
}

[data-theme="dark"] {
  --link-color: #66a58b;
  --link-hover-color: #99c3b1;
  --border-color: #338764;
  --collapse-hover: #12312b;
  --theme-toggle-track: #12312b;
  --theme-toggle-track-active: #338764;
  --theme-toggle-icon-color: #ffffff;
  --theme-toggle-thumb: #ffffff;
  --focus-ring-color: #66a58b;
}

/* Theme switch: a green track in either state, with an accessible icon color. */
.slider {
  background-color: var(--theme-toggle-track);
}

.slider:before {
  background-color: var(--theme-toggle-thumb);
}

input:checked + .slider {
  background-color: var(--theme-toggle-track-active);
}

.slider .sun-icon,
.slider .moon-icon {
  color: var(--theme-toggle-icon-color);
}

/* Collapsible abstracts use the same accent palette. */
.active,
.collapse:hover {
  background-color: var(--collapse-hover);
}

/* Keep keyboard navigation visible in both themes. */
a:focus-visible,
.collapse:focus-visible,
.switch input:focus-visible + .slider {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
}