/* sparkbench-adopt.css - adapter that re-skins the existing minisite to HumanSpark.
 *
 * The minisite defines its palette as CSS variables (--fg, --bg, --link, --line,
 * --code) plus a few literal hexes on .hero/.cta/.stat. This file redefines those
 * in terms of HumanSpark tokens, so the whole site re-skins at the variable level
 * (a systemic change, not per-page patches).
 *
 * Requires tokens.css loaded first. Load order per page:
 *   tokens.css -> fonts.css -> (minisite's own inline <style>) -> sparkbench-adopt.css -> brand-shell.css
 * i.e. include this AFTER the page's existing inline styles so it wins the cascade.
 *
 * PREFERRED long-term: bake these mappings into the minisite generator so pages
 * are born on-brand. This drop-in file is the fast path / reference implementation.
 */

/* Map the minisite's variables to brand tokens. */
:root {
  --fg:    var(--hs-text);
  --bg:    var(--hs-white);
  --muted: var(--hs-text-muted);
  --link:  var(--hs-teal);
  --line:  var(--hs-border-subtle);
  --code:  var(--hs-bg-reading);
  color-scheme: light;
}

/* Force light mode. The minisite auto-switches to dark via prefers-color-scheme;
 * humanspark.ai is light-only, so we neutralise the dark block to keep the
 * microsite on-brand regardless of the visitor's OS setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --fg:    var(--hs-text);
    --bg:    var(--hs-white);
    --muted: var(--hs-text-muted);
    --link:  var(--hs-teal);
    --line:  var(--hs-border-subtle);
    --code:  var(--hs-bg-reading);
  }
}

body { font-family: var(--hs-font-body); }
code, pre, kbd, samp { font-family: var(--hs-font-mono); }

/* Hero: minisite ships a blue gradient (#0b2942 -> #154a72). Remap to HS navy. */
.hero { background: linear-gradient(135deg, var(--hs-navy), var(--hs-navy-light)); }
.hero h1 { color: var(--hs-white); }
.hero .lead { color: var(--hs-dark-text-muted); }

/* Stat chips on the hero. */
.stat { background: var(--hs-overlay-medium); }
.stat b { color: var(--hs-white); }
.stat span { color: var(--hs-dark-text-muted); }

/* CTAs: primary becomes gold-on-navy (HS accent); ghost stays outlined on navy. */
.cta { background: var(--hs-accent); color: var(--hs-navy); border-radius: var(--hs-radius); }
.cta:hover { background: var(--hs-accent-dark); }
.cta.ghost { background: transparent; border: 1px solid var(--hs-overlay-strong); color: var(--hs-white); }

/* Cards / callouts pick up teal accents (teal = accent only, never a fill). */
.explainer { border-left-color: var(--hs-teal); }
.explainer strong:first-child { color: var(--hs-link-hover); }
blockquote { border-left-color: var(--hs-accent); }