:root {
  --bg: #120d1b;
  --bg-deep: #09070f;
  --surface: #1b1328;
  --surface-2: #27183b;
  --panel: #1b1328;
  --panel2: #20152f;
  --text: #faf7ff;
  --muted: #c9bdd6;
  --line: #51356e;
  --lime: #c084fc;
  --mint: #d8b4fe;
  --yellow: #e9d5ff;
  --green: #c084fc;
  --btn: #8b3eea;
  --focus: #ead7ff;
  --purple: #a855f7;
  --purple-bright: #c084fc;
  --purple-deep: #6d28d9;
  --purple-ink: #160822;
  --purple-glow: rgba(168, 85, 247, .34);
  --title: #d8b4fe;
  --accent: #c084fc;
  --accent2: #e9d5ff;
  --border: rgba(192, 132, 252, .30);
  --ok: #c084fc;
  --warn: #f0abfc;
  --codebg: rgba(9, 7, 15, .76);
  --btn-hover: #7e22ce;
}

html {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(900px 560px at 16% -8%, rgba(157, 78, 221, .22), transparent 62%),
    radial-gradient(780px 520px at 90% 10%, rgba(94, 39, 150, .20), transparent 64%),
    linear-gradient(145deg, #120d1b 0%, #0b0911 52%, #15101d 100%);
  color: var(--text);
}

a {
  text-decoration-color: rgba(192, 132, 252, .68);
}

a:hover {
  color: #e9d5ff;
}

main h1,
main h2,
main h3 {
  border-color: rgba(192, 132, 252, .32) !important;
}

main h2,
main h3 {
  color: #c084fc !important;
}

main a:not(.button):not(.path-card):not(.resource-card):not(.brand) {
  color: #c084fc !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px rgba(168, 85, 247, .22);
}

::selection {
  background: #c084fc;
  color: #160822;
}

.site-header,
.modern-bar {
  background: rgba(10, 7, 16, .94) !important;
  border-bottom-color: rgba(192, 132, 252, .24) !important;
}

.brand > span > span,
.modern-brand strong,
.eyebrow,
.text-link,
.card-link,
.resource-card .tag,
.resource-card b,
.feature-grid > a > span,
.feature-grid b,
.compare-card.good > span,
.compare-card a,
.content-main h2,
.breadcrumb a {
  color: var(--purple-bright) !important;
}

.nav-toggle,
.modern-toggle {
  border-color: rgba(192, 132, 252, .34) !important;
  background: linear-gradient(145deg, rgba(168, 85, 247, .13), rgba(73, 37, 101, .16)) !important;
}

.nav-toggle:hover,
.modern-toggle:hover {
  border-color: var(--purple-bright) !important;
  background: rgba(168, 85, 247, .22) !important;
  box-shadow: 0 0 26px rgba(168, 85, 247, .22);
}

.primary-nav,
.modern-nav {
  background: linear-gradient(150deg, rgba(30, 19, 43, .98), rgba(10, 8, 15, .99)) !important;
  border-color: rgba(192, 132, 252, .44) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .56), 0 0 40px rgba(126, 34, 206, .12) !important;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"],
.modern-nav a:hover,
.modern-nav a[aria-current="page"] {
  color: #f4e8ff !important;
  background: linear-gradient(90deg, rgba(168, 85, 247, .26), rgba(168, 85, 247, .07)) !important;
}

.primary-nav .nav-cta,
.modern-nav .modern-cta {
  border-color: var(--purple-bright) !important;
  color: #f5eaff !important;
  background: linear-gradient(90deg, #6d28d9, #9333ea) !important;
}

.primary-nav .nav-cta:hover,
.modern-nav .modern-cta:hover {
  color: white !important;
  background: linear-gradient(90deg, #7e22ce, #a855f7) !important;
  box-shadow: 0 0 28px var(--purple-glow);
}

.section-grid {
  background-image:
    linear-gradient(rgba(192, 132, 252, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192, 132, 252, .055) 1px, transparent 1px) !important;
}

.hero,
.hub-hero {
  background:
    radial-gradient(700px 460px at 72% 25%, rgba(168, 85, 247, .17), transparent 68%),
    linear-gradient(145deg, #0c0812, #15101f) !important;
}

.hero h1 em,
.hub-hero h1 em {
  color: #c084fc !important;
  text-shadow: 0 0 34px rgba(168, 85, 247, .24);
}

.button-primary,
button[type="submit"],
body:not(.failure-lab) button:not(.nav-toggle):not(.modern-toggle) {
  color: #fff !important;
  background: linear-gradient(95deg, #6d28d9, #9333ea) !important;
  border-color: #b66cff !important;
  box-shadow: 0 12px 30px rgba(109, 40, 217, .25);
}

.button-primary:hover,
button[type="submit"]:hover,
body:not(.failure-lab) button:not(.nav-toggle):not(.modern-toggle):hover {
  background: linear-gradient(95deg, #7e22ce, #a855f7) !important;
  box-shadow: 0 14px 38px rgba(168, 85, 247, .34);
  transform: translateY(-1px);
}

body:not(.failure-lab) button:not(.nav-toggle):not(.modern-toggle) a {
  color: #fff !important;
  text-decoration: none !important;
}

.button-secondary {
  border-color: #76518f !important;
  background: rgba(168, 85, 247, .05) !important;
}

.button-secondary:hover {
  border-color: #c084fc !important;
  color: #e9d5ff !important;
  background: rgba(168, 85, 247, .12) !important;
}

.check-console,
.path-card,
.feature-grid > a,
.compare-card,
.resource-card,
.value-card,
.contact-form,
.card,
.callout {
  background: linear-gradient(145deg, rgba(39, 24, 59, .96), rgba(18, 13, 27, .96)) !important;
  border-color: rgba(192, 132, 252, .30) !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .025);
}

.path-card:hover,
.feature-grid > a:hover,
.resource-card:hover {
  border-color: #b66cff !important;
  background: linear-gradient(145deg, rgba(55, 31, 79, .98), rgba(27, 17, 39, .98)) !important;
  box-shadow: 0 20px 48px rgba(92, 35, 150, .24);
}

.score-ring {
  border-color: rgba(192, 132, 252, .18) !important;
  border-top-color: #c084fc !important;
  border-right-color: #a855f7 !important;
  box-shadow: 0 0 35px rgba(168, 85, 247, .16);
}

.score-ring strong,
.metric-grid strong,
.path-icon,
.steps > li > span,
.check-icon {
  color: #c084fc !important;
}

.status-dot {
  background: #c084fc !important;
  box-shadow: 0 0 16px #a855f7 !important;
}

.metric-grid,
.metric-grid > div,
.section-tint {
  background: rgba(25, 15, 37, .86) !important;
  border-color: rgba(192, 132, 252, .20) !important;
}

.section-cta {
  color: var(--purple-ink) !important;
  background: linear-gradient(115deg, #a855f7, #c084fc 52%, #9b5de5) !important;
}

.section-cta .eyebrow {
  color: #2f0b49 !important;
}

.section-cta .button-primary {
  color: #fff !important;
  background: #160822 !important;
  border-color: #160822 !important;
}

.section-cta .button-secondary {
  color: #1d0b2b !important;
  border-color: rgba(29, 11, 43, .56) !important;
  background: rgba(255, 255, 255, .13) !important;
}

.site-footer,
.content-footer-note {
  background: #09070f !important;
  border-top-color: rgba(192, 132, 252, .22) !important;
}

.content-main table,
table {
  border-color: rgba(192, 132, 252, .30) !important;
  background: rgba(27, 19, 40, .94) !important;
}

.content-main th,
th {
  background: rgba(168, 85, 247, .13) !important;
  color: #f7efff !important;
}

.content-main tr + tr td,
tr + tr td {
  border-top-color: rgba(192, 132, 252, .19) !important;
}

input,
textarea,
select {
  color: var(--text) !important;
  background: rgba(10, 7, 16, .88) !important;
  border-color: #6f4b89 !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #c084fc !important;
}

.notice,
.contact-note,
.content-main .callout,
.tip,
.callout {
  border-left-color: #a855f7 !important;
  background: rgba(168, 85, 247, .09) !important;
}

.failure-lab .toggle[aria-pressed="true"] {
  border-color: #c084fc !important;
  color: #f4e8ff !important;
  background: rgba(168, 85, 247, .22) !important;
}

.failure-lab .modern-context a,
.failure-lab .toc h2,
.failure-lab a:not(.modern-brand) {
  color: #c084fc;
}

.skip-link:focus {
  color: #160822 !important;
  background: #e9d5ff !important;
}

@media (prefers-reduced-motion: reduce) {
  .button-primary:hover,
  button[type="submit"]:hover {
    transform: none;
  }
}