/*
 * APA favicon palette — definitive gold replacement
 * Paste this entire block at the very bottom of the EXISTING site.css.
 */

:root {
  --brand-purple-rgb: 165, 109, 226;
  --apa-purple: #a56de2;
  --apa-purple-light: #b888ed;
  --apa-purple-pale: #cba8f4;
  --apa-purple-line: rgba(165, 109, 226, 0.38);
  --apa-purple-wash: rgba(165, 109, 226, 0.12);

  /* Override likely existing gold tokens. */
  --gold: var(--apa-purple) !important;
  --gold-light: var(--apa-purple-light) !important;
  --accent: var(--apa-purple) !important;
  --accent-2: var(--apa-purple-light) !important;
  --line: var(--apa-purple-line) !important;
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(165, 109, 226, 0.15), transparent 480px),
    radial-gradient(circle at 88% 12%, rgba(184, 136, 237, 0.08), transparent 448px),
    linear-gradient(#050505 0%, #0b0b0b 48%, #050505 100%) !important;
}

.skip-link {
  color: #070707 !important;
  background: var(--apa-purple-light) !important;
  border-color: #070707 !important;
}

.brand-mark {
  color: transparent !important;
  background:
    url("/favicon.ico") center / cover no-repeat,
    #030206 !important;
  border-color: rgba(184, 136, 237, 0.5) !important;
  box-shadow: 0 0 22px rgba(165, 109, 226, 0.22) !important;
}

.site-nav a.active,
.site-nav a[aria-current="page"] {
  color: var(--text) !important;
  border-color: var(--apa-purple-line) !important;
  background: var(--apa-purple-wash) !important;
}

.site-nav .nav-lookup,
.button.primary,
a.button.primary,
button.primary,
input[type="submit"] {
  color: #070707 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: linear-gradient(
    135deg,
    var(--apa-purple-light),
    var(--apa-purple)
  ) !important;
  box-shadow: 0 10px 28px rgba(165, 109, 226, 0.25) !important;
}

.site-nav .nav-lookup:hover,
.button.primary:hover,
.button.primary:focus-visible,
button.primary:hover,
input[type="submit"]:hover {
  color: #070707 !important;
  background: linear-gradient(135deg, #c49bf2, var(--apa-purple-light)) !important;
}

.button.secondary,
a.button.secondary,
button.secondary {
  border-color: var(--apa-purple-line) !important;
  background: rgba(165, 109, 226, 0.07) !important;
}

.hero-card {
  border-color: var(--apa-purple-line) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(165, 109, 226, 0.18), transparent 384px),
    linear-gradient(rgba(255, 255, 255, 0.043), transparent),
    #121212 !important;
}

.lookup-callout,
.notice,
.wide-card,
.final-banner {
  border-color: var(--apa-purple-line) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(165, 109, 226, 0.14), transparent 352px),
    rgba(19, 19, 19, 0.92) !important;
}

.eyebrow,
.tag,
.pill {
  color: var(--apa-purple-pale) !important;
  border-color: var(--apa-purple-line) !important;
  background: var(--apa-purple-wash) !important;
}

.kicker,
.arrow,
.score strong,
.notice strong,
.lookup-callout strong,
.wide-card strong,
.final-banner strong,
.section strong {
  color: var(--apa-purple-light) !important;
}

.score {
  background:
    linear-gradient(rgba(165, 109, 226, 0.085), transparent),
    #121212 !important;
}

th {
  color: var(--apa-purple-pale) !important;
  border-color: var(--apa-purple-light) !important;
  background: rgba(165, 109, 226, 0.11) !important;
}

a:not(.button):not(.brand):not(.category):not(.card) {
  text-decoration-color: rgba(184, 136, 237, 0.5);
}

:focus-visible {
  outline-color: var(--apa-purple-light) !important;
}