/*
 * Site-specific colour extras on top of tokens.css (which is generated from the app's
 * src/index.css and already carries the brand palette from docs/brand-colors.md).
 * `--spark` is the one yellow per screen; `--link` and `--accent-text` are text-safe
 * purple and yellow for each theme; `--lcd` is the status strip's dark face.
 */
:root {
  --primary-hover: var(--brand-purple-700);
  --spark-hover: var(--brand-yellow-600);
  --accent-text: var(--brand-yellow-800);
  --lcd: #211a2e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-hover: var(--brand-purple-400);
    --accent-text: var(--brand-yellow-500);
    --lcd: #110d18;
  }
}
:root[data-theme="dark"] {
  --primary-hover: var(--brand-purple-400);
  --accent-text: var(--brand-yellow-500);
  --lcd: #110d18;
}

/* The one yellow element per screen: the Buy / Upgrade button and the "recommended" badge. */
.btn-accent {
  background: var(--spark);
  color: var(--spark-foreground);
  box-shadow: 0 10px 24px -10px var(--spark);
}
.btn-accent:hover {
  background: var(--spark-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px var(--spark);
}
.btn-primary:hover {
  background: var(--primary-hover);
}
.badge {
  background: var(--spark);
  color: var(--spark-foreground);
}
.price-card.featured {
  border-color: var(--primary);
}

/* Small yellow accents: labels, step numbers, ticks, a glow behind the mascot. Surfaces stay purple. */
.kicker,
.price-card.featured .price-name,
.release .ver.latest {
  color: var(--accent-text);
}
.release .ver.latest {
  border-color: color-mix(in oklab, var(--spark) 55%, var(--border));
}
.step .num {
  background: var(--spark);
  color: var(--spark-foreground);
}
.facts svg,
.price-list li::before,
.compare td.yes {
  color: var(--accent-text);
}
.eyebrow .dot {
  background: var(--spark);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--spark) 25%, transparent);
}
.hero-mascot {
  position: relative;
}
.hero-mascot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 260px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--spark) 38%, transparent), transparent 72%);
  pointer-events: none;
}
.hero-mascot > svg {
  position: relative;
}
.section-head .link:hover,
.panel-head .link:hover {
  color: var(--accent-text);
}
.nav a.active {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.12),
    inset 0 -2px 0 var(--spark);
}