/* =========================================================
   Serene Sprints — "Atlas" theme (from the AI in Practice page)
   Dark navy header, hero, dark bands and footer with a
   cyan → violet → pink gradient; light content in between.
   Fonts: Unbounded (headings), Public Sans (text), JetBrains Mono (labels).

   Loaded LAST in <head> on every page, after the page's own styles and
   /assets/css/site-header.css, so it only has to redefine the shared
   design tokens plus a few component rules.
   Pages that keep their own brand colour (book pages) set
   <html data-brand="book"> and keep their --primary.
   ========================================================= */

:root{
  /* atlas palette */
  --at-navy:#050914;          /* deepest background */
  --at-navy-2:#0B1124;        /* raised dark surface */
  --at-navy-3:#131B36;
  --at-cy:#22D3EE; --at-vi:#8B5CF6; --at-ma:#EC4899;
  --at-grad:linear-gradient(100deg,#22D3EE,#8B5CF6 55%,#EC4899);
  --at-grad-btn:linear-gradient(100deg,#0E7490,#6D28D9 52%,#BE185D);   /* white text passes AA */
  --at-grad-text-light:linear-gradient(100deg,#0E7490,#6D28D9 55%,#BE185D); /* gradient words on light */
  --at-glow:0 0 0 1px rgba(139,92,246,.22),0 18px 44px -16px rgba(34,211,238,.35);
  --at-disp:"Unbounded","Public Sans",system-ui,sans-serif;

  /* shared tokens used by precision.css and the coaching pages */
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#FFFFFF;
  --bg-2:#F4F6FB;
  --ink:#050914;
  --ink-2:#0B1124;
  --ink-3:#131B36;
  --ink-deep:#03060E;
  --text:#121A30;
  --muted:#556078;
  --faint:#5E6984;
  --line:rgba(20,33,61,.10);
  --line-2:rgba(20,33,61,.18);
  --line-d:rgba(148,163,255,.14);
  --line-d2:rgba(148,163,255,.26);
  --accent:#6D28D9;
  --accent-2:#5B21B6;
  --accent-soft:#F1ECFF;
  --accent-hi:#A78BFA;
  --muted-d:#9AA6C3;
  --text-d:#E8ECF8;

  /* precision.css family */
  --bg-page:#F4F6FB;
  --bg-section:#FFFFFF;
  --bg-alt:#F4F6FB;
  --bg-card:#FFFFFF;
  --bg-ink:#050914;
  --bg-ink-2:#0B1124;
  --text-main:#121A30;
  --text-soft:#535E76;
  --border-soft:#DCE1EA;
}
:root:not([data-brand="book"]){
  --primary:#6D28D9;
  --primary-dark:#5B21B6;
  --primary-soft:#F1ECFF;
}

/* ---------- type ---------- */
html body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* :not(#at) lifts specificity above page rules like `.serif{font-family:…!important}` */
html body :is(h1,h2,.h1,.h2,.section-title):not(#at){
  font-family:var(--at-disp)!important;font-weight:600!important;letter-spacing:-.025em;
}
/* Unbounded is wide: bring display sizes down so headlines keep their line breaks */
html body .h1,html body .hero h1,html body .blog-hero h1,html body .dt-hero h1{
  font-size:clamp(2rem,3.5vw,3.1rem)!important;line-height:1.1!important;letter-spacing:-.03em!important;
}
html body .h2,html body .section-title{font-size:clamp(1.65rem,2.9vw,2.5rem)!important;line-height:1.12!important}
html body main h2:not([class]){letter-spacing:-.02em}
html body h3,html body h4{font-family:var(--sans)!important;letter-spacing:-.01em}
html body .eyebrow,html body .badge{font-family:var(--mono)!important}

/* ---------- gradient emphasis ---------- */
.h1 em,.h2 em,.section-title span,.hero h1 em,.hero h1 span.hl,.hero h1 .accent{
  background:var(--at-grad-text-light);-webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.hero .h1 em,.hero h1 em,.section--ink .h2 em,.band .h2 em,.blog-hero h1 em,.dt-hero h1 em,
[data-hero="dark"] .hero h1 span,[data-hero="dark"] .hero h1 em{
  background:var(--at-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;
}

/* ---------- buttons ---------- */
.btn-gold,.btn-primary,.btn.btn-primary,.nav-btn,.submit-btn,.plan-cta.primary{
  background:var(--at-grad-btn)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 10px 28px -12px rgba(109,40,217,.65),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.btn-gold:hover,.btn-primary:hover,.nav-btn:hover,.submit-btn:hover,.plan-cta.primary:hover{
  filter:brightness(1.08);box-shadow:0 14px 34px -12px rgba(109,40,217,.75),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
a:focus-visible,button:focus-visible{outline:2px solid #22D3EE;outline-offset:3px}

/* ---------- shared dark surface ---------- */
.hero,.blog-hero,.dt-hero,.section--ink,.band,footer,.footer,
[data-hero="dark"] .hero,[data-hero="dark"] .blog-hero{
  --at-surface:1;
}
.section--ink,.band,
[data-hero="dark"] .hero,[data-hero="dark"] .blog-hero,.dt-hero,
html body .hero,html body .blog-hero{
  background:
    radial-gradient(760px 420px at 86% -6%,rgba(139,92,246,.30),transparent 62%),
    radial-gradient(620px 380px at 4% 104%,rgba(34,211,238,.16),transparent 60%),
    radial-gradient(520px 320px at 60% 120%,rgba(236,72,153,.12),transparent 60%),
    linear-gradient(rgba(148,163,255,.05) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(148,163,255,.05) 1px,transparent 1px) 0 0/56px 56px,
    var(--at-navy)!important;
  border-color:var(--line-d)!important;
}
.section--ink::before,.hero::before{display:none!important}

/* ---------- tokens inside dark surfaces ----------
   Text that uses --ink/--text/--accent stays readable on navy. */
.hero,.blog-hero,.dt-hero,.section--ink,.band,footer,.footer,.ss-shelf{
  --ink:#F3F5FC;
  --text:#E8ECF8;
  --text-main:#E8ECF8;
  --muted:#9AA6C3;
  --text-soft:#9AA6C3;
  --faint:#8C97B3;
  --line:rgba(148,163,255,.16);
  --line-2:rgba(148,163,255,.28);
  --accent:#A78BFA;
  --accent-hi:#C4B5FD;
  --border-soft:rgba(148,163,255,.18);
}
:root:not([data-brand="book"]) :is(.hero,.blog-hero,.dt-hero,.section--ink,.band,footer,.footer,.ss-shelf){--primary:#A78BFA}
[data-brand="book"] .hero{--primary:#F87171}
/* light cards that sit inside dark sections get the light-surface tokens back */
:is(.hero,.blog-hero,.dt-hero,.section--ink,.band,footer,.footer,.ss-shelf) :is(.form-card,.is-card,.card,.audience-card,.btn-line,.btn-ink,.badge,.result-box){
  --ink:#050914;--text:#121A30;--text-main:#121A30;--muted:#556078;--text-soft:#535E76;--faint:#5E6984;
  --line:rgba(20,33,61,.10);--line-2:rgba(20,33,61,.18);--border-soft:#DCE1EA;
  --accent:#6D28D9;--accent-hi:#6D28D9;--primary:#6D28D9;
}
/* legacy colour aliases resolve at :root, so re-point them on dark too */
:is(.hero,.blog-hero,.dt-hero,.section--ink,.band,footer,.footer,.ss-shelf,.people-section){--gold:#C4B5FD;--gold-hi:#DDD6FE;--gold-deep:#A78BFA}
.people-section{--accent:#A78BFA}
[data-brand="book"] .hero .lie{color:#F3F5FC}
/* buttons that used dark text on the old indigo */
.booking-btn,.assessment-band-btn{background:var(--at-grad-btn)!important;color:#fff!important}
/* footer small print */
.footer .foot-col h4,.footer .foot-base,.footer h4{color:#8C97B3!important}
.book-row small{background:var(--at-grad)!important;color:#050914!important}
.hero h1 .lie{color:#FCA5A5!important}
[data-hero="dark"] .card .btn-ghost{color:#6D28D9!important;border-color:var(--line-2)!important;background:transparent!important}
/* footer text */
footer h4,.footer h4,footer small,footer .copy,footer [class*="bottom"] span,footer [class*="bottom"] a{color:#8C97B3}

/* ---------- header + announcement ---------- */
#site-announce,#site-header{
  --sh-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sh-grad:var(--at-grad-btn);
  --sh-text:#E8ECF8;--sh-muted:#9AA6C3;--sh-line:rgba(148,163,255,.14);
}
#site-announce{background:linear-gradient(90deg,#0B1124,#1B1240 45%,#2A0F3A)!important}
#site-header{
  background:radial-gradient(600px 120px at 12% 0%,rgba(34,211,238,.12),transparent 70%),
             radial-gradient(500px 120px at 88% 0%,rgba(139,92,246,.18),transparent 70%),
             rgba(5,9,20,.92)!important;
}
#site-header.is-scrolled{background:rgba(5,9,20,.96)!important}
#site-header::after{background:linear-gradient(90deg,transparent,rgba(34,211,238,.55) 25%,rgba(139,92,246,.6) 55%,rgba(236,72,153,.5) 80%,transparent)!important}
#site-header .brand-name{font-family:var(--at-disp)!important;font-weight:600;letter-spacing:-.01em}
#site-header .hdr-cta{background:var(--at-grad-btn)!important;box-shadow:0 8px 24px -10px rgba(139,92,246,.7)!important}
#site-header .mega{background:#0B1124!important;border-color:rgba(148,163,255,.16)!important}
#site-header .mega-feature{background:linear-gradient(140deg,rgba(34,211,238,.12),rgba(139,92,246,.16) 55%,rgba(236,72,153,.12))!important}
#site-header .mtag-new{background:var(--at-grad)!important;color:#050914!important}
#site-header .scroll-progress{background:var(--at-grad)!important}

/* ---------- light hero → dark (coaching pages and others) ---------- */
html body .hero{color:var(--text-d)}
html body .hero .h1,html body .hero h1{color:#F3F5FC!important}
html body .hero .eyebrow{color:var(--at-cy)!important}
html body .hero .hero-lede,html body .hero .lede,html body .hero p{color:var(--muted-d)}
html body .hero .hero-lede strong,html body .hero p strong{color:#E8ECF8}
html body .hero .hero-note,html body .hero .jump,html body .hero .jump b{color:#7F8AA3}
html body .hero .hero-note a,html body .hero .jump a{color:#C9D1E8;border-color:rgba(148,163,255,.3)}
html body .hero .jump a:hover{color:#fff;border-color:var(--at-cy)}
html body .hero .link-arrow{color:#fff;border-color:rgba(148,163,255,.35)}
html body .hero .btn-line,html body .hero .btn-ghost,html body .hero .btn-secondary{background:rgba(255,255,255,.05)!important;color:#fff!important;border-color:rgba(148,163,255,.32)!important}
html body .hero .creds{background:rgba(5,9,20,.55);border-top-color:var(--line-d)}
html body .hero .creds .wrap{color:#8C97B3}
html body .hero .creds span::before{background:var(--at-grad)}
html body .hero .sample{background:#0B1124!important;border:1px solid rgba(148,163,255,.18)!important;box-shadow:var(--at-glow)!important}

/* ---------- dark bands ---------- */
.section--ink .eyebrow,.band .eyebrow{color:var(--at-cy)!important}

/* ---------- light content: cards get a subtle cool lift ---------- */
.plan-card.featured,.plan-card.is-featured{
  background:linear-gradient(160deg,#0B1124,#131B36)!important;border-color:rgba(139,92,246,.45)!important;box-shadow:var(--at-glow)!important;
}
.popular-badge{background:var(--at-grad)!important;color:#050914!important}

/* home: "Seven books" shelf heading */
html body .ss-head h2:not(#at){font-size:clamp(2rem,3.6vw,3.2rem)!important;line-height:1.1!important;letter-spacing:-.03em!important}
html body .ss-head h2 :is(em,span){background:var(--at-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* reader tools: hero is a block inside the page column, so give it card edges */
html body .shell > .hero{border-radius:20px;padding:clamp(1.8rem,4vw,2.8rem) clamp(1.4rem,4vw,2.6rem)!important;margin-top:1.5rem;overflow:hidden}
html body .shell > .hero .lede{color:var(--muted-d)!important}
html body .shell > .hero h1 .accent{background:var(--at-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* old /blog index: first section acts as the hero */
[data-hero="dark"] main > section.section-alt:first-child{
  background:radial-gradient(760px 420px at 86% -6%,rgba(139,92,246,.30),transparent 62%),radial-gradient(620px 380px at 4% 104%,rgba(34,211,238,.16),transparent 60%),var(--at-navy)!important;
  --ink:#F3F5FC;--text:#E8ECF8;--text-main:#E8ECF8;--text-soft:#9AA6C3;--muted:#9AA6C3;--accent:#A78BFA;--primary:#A78BFA;
}
[data-hero="dark"] main > section.section-alt:first-child :is(.section-title,h1){color:#F3F5FC!important}
[data-hero="dark"] main > section.section-alt:first-child .section-kicker{color:#22D3EE!important}
[data-hero="dark"] main > section.section-alt:first-child .section-subtitle{color:#9AA6C3!important}
[data-hero="dark"] main > section.section-alt:first-child .card{--ink:#050914;--text:#121A30;--text-main:#121A30;--text-soft:#535E76;--muted:#556078;--accent:#6D28D9;--primary:#6D28D9}

/* ---------- footer ---------- */
footer,.footer,html body footer.footer{
  background:radial-gradient(700px 260px at 85% 0%,rgba(139,92,246,.16),transparent 65%),
             radial-gradient(600px 240px at 5% 100%,rgba(34,211,238,.10),transparent 60%),
             #03060E!important;
  border-top:1px solid rgba(148,163,255,.14)!important;
}
footer::before{content:"";display:block;height:1px;background:var(--at-grad);opacity:.55}

/* ---------- selection ---------- */
::selection{background:rgba(139,92,246,.28)}