:root {
  --ua-blue: #0057b7;
  --ua-yellow: #ffd700;

  /* Default: treat as Light (also first paint before color-preference.js sets data-color) */
  --color-anchor: var(--ua-blue);
  --color-hover: #2b7bdc;
  --link-visited: #0d4f8b;
  --link-active: #4a9eff;
}

/* Light: blue link family (explicit; same as :root) */
html[data-color="light"] {
  --color-anchor: var(--ua-blue);
  --color-hover: #2b7bdc;
  --link-visited: #0d4f8b;
  --link-active: #4a9eff;
}

/* Dark + Night: yellow link family */
html[data-color="dark"],
html[data-color="night"] {
  --color-anchor: var(--ua-yellow);
  --color-hover: #ffeb99;
  --link-visited: #c9a000;
  --link-active: #fff3a3;
}

/* In-page links: home, article body, list pages */
.home-content a,
#article-content a {
  color: var(--color-anchor);
  text-decoration: none;
}
.home-content a:hover,
#article-content a:hover {
  color: var(--color-hover);
  text-decoration: underline;
}

#article-content a:visited {
  color: var(--link-visited);
}
#article-content a:active {
  color: var(--link-active);
}

/* Main nav: same yellow system (overrides theme menu text color) */
#site-header #site-header-brand a,
#site-header #site-header-menu a {
  color: var(--color-anchor);
}
#site-header #site-header-brand a:hover,
#site-header #site-header-brand a:focus,
#site-header #site-header-menu a:hover,
#site-header #site-header-menu a:focus,
#site-header #site-header-menu a.active {
  color: var(--color-hover);
}

/* Theme / language dropdowns: keep theme text on panel (not full‑width yellow links) */
#site-header .dropdown-menu a,
#site-header .dropdown-menu button {
  color: var(--color3) !important;
}
#site-header .dropdown-menu a:hover,
#site-header .dropdown-menu button:hover {
  color: var(--color2) !important;
}

/* Footer links */
#site-footer a {
  color: var(--color-anchor);
}
#site-footer a:hover {
  color: var(--color-hover);
}

/*
  Blue accent on the *site* header only (not bare `header` — would hit #article-header).
*/
#site-header,
.site-header,
.layout-site-header {
  border-bottom: 3px solid var(--ua-blue);
}

/* UI chrome: keep yellow accent for form controls, active menu markers */
.is-active,
.active,
.current {
  accent-color: var(--ua-yellow);
}