/* SparkMyName — Dark Studio theme, carried to the public pages (Sep 15 2026).
   Loaded LAST so it wins. Flips the cinema.css/styles.css color tokens to dark and
   patches the hard-coded white "island" components + the shared header/footer.
   NOT loaded on the app (workspace/account) — those stay light on purpose. */

:root{
  --paper:#05050A !important; --bg1:#05050A !important;
  --cream:#0B0B14 !important;
  --ink:#F4EFE4 !important; --ink2:#FFFFFF !important; --ink3:#C9C4BA !important;
  --line:rgba(212,196,163,.16) !important;
  --gold-line:rgba(196,163,90,.34) !important;
  --gold-pale:rgba(196,163,90,.10) !important;
  --gold-deep:#c4a35a !important; --gold:#c4a35a !important; --gold-bright:#E2C98A !important;
  --green:#7FB08A !important;
  --shadow-md:0 2px 4px rgba(0,0,0,.45),0 24px 60px -24px rgba(0,0,0,.65) !important;
  --shadow-lg:0 2px 6px rgba(0,0,0,.55),0 40px 90px -30px rgba(0,0,0,.75) !important;
  /* sample.html / samples.html parallel token system */
  --bg:#05050A !important; --bg2:#141420 !important;
  --ink:#F4EFE4 !important; --sub:#C9C4BA !important; --faint:#A8A296 !important;
  --hair:rgba(212,196,163,.16) !important; --spark:#c4a35a !important; --sparkp:#c4a35a !important;
}
html,body{background:#05050A !important;color:#F4EFE4 !important}

/* white-island components -> dark cards (every hard-coded #fff class in cinema.css + styles.css) */
.capCard,.floatCard,.boardMini,.search,.howStep,.card,.panel,.tile,.faqItem,details,
.cta-ghost,.btnLight,.priceCard,.planCard,.sampleCard,.kitCard,.docCard,.noteCard,.box,.callout,
.notice,.formcard,.footer,.success,.notfound,.founder-card,.vs-col,.mb-fin,.cmodal-card,
.kit-tile,.ncard2,.db,.det-hero,.name-card,.mail,.mini-card,.pricing-trust,.simple-page .card,
.navlinks .pill,.rm,.hub-sort,.kt-del,.cbtn,.more-mic,.co-field,.field,
.k,.tldr,.tip,.callout2,.hl,.note-box,.qbox,.info,.aside,.pull,
.gcard,.res-disc,.res-card,.topbar,.confirm-receipt,.confirm-card,.confirm-foot-note,
.sx-panel,.sx-receipt,.sx-grid>div,.res-grid>div,.gcard,.confirm-card>div,
.aff-rate,.confirm-card,.confirm-peach,.confirm-receipt,.cta,.included,
.k-lane,.k-logo-chip,.k-studio-note,.k-post,.k-studio,.k-quote,.res-card,.res-disc,.skip-link
{background:#10101C !important;background-image:none !important;color:#F4EFE4 !important;border-color:rgba(196,163,90,.24) !important}
.cream,.flowIn,.flowOut,.heroCin,.simple-page{background:#05050A !important}
section{background:transparent}
/* force heading contrast on dark (some pages carry darker heading colors) */
h1,h2,h3,h4{color:#F4EFE4 !important}
.kicker,.eyebrow,.section-label,.ey{color:#c4a35a !important}

/* inline-styled cream / gold-pale cards & badges (beat inline style with !important).
   Gold-gradient buttons (linear-gradient(...#B8871C...)) are intentionally NOT matched. */
[style*="linear-gradient(180deg,#FFFDF7"],
[style*="linear-gradient(180deg, #FFFDF7"],
[style*="background:#F8F0DA"],[style*="background: #F8F0DA"],
[style*="background:#FAF8F2"],[style*="background: #FAF8F2"]
{background:#10101C !important;background-image:none !important;border-color:rgba(196,163,90,.30) !important;color:#F4EFE4 !important}
[style*="background:#fff"],[style*="background: #fff"],
[style*="background:#FFFFFF"],[style*="background: #FFFFFF"]
{background:#141420 !important;border-color:rgba(196,163,90,.30) !important}
/* dark-ink inline text -> light on dark */
[style*="color:#171410"],[style*="color: #171410"],
[style*="color:#3E3A32"],[style*="color: #3E3A32"],
[style*="color:#5C5340"],[style*="color: #5C5340"]{color:#EAE5D8 !important}

/* form fields */
input,textarea,select{background:#10101C !important;color:#F4EFE4 !important;border-color:rgba(212,196,163,.24) !important}
input::placeholder,textarea::placeholder{color:#8A8578 !important}

/* readable body text on dark */
p,li,summary,.note,.a,.lede,.sub,td,th,dd,dt,figcaption,blockquote{color:#F4EFE4 !important}
small,.fine,.muted,.dim{color:#FFFFFF !important}
a{color:#c4a35a}

/* HEADER — dark (matches homepage) */
.cinTop{background:rgba(5,5,10,.82) !important;border-bottom:1px solid rgba(212,196,163,.16) !important}
.cinNav .lnk{color:#C9C4BA !important}
.cinNav .lnk:hover{color:#c4a35a !important}
.studioBtn{border:1px solid rgba(196,163,90,.35) !important;color:#c4a35a !important;background:transparent !important}
.studioBtn:hover{border-color:#c4a35a !important;color:#E2C98A !important}
.smnLC .smnSel{background:#10101C !important;border:1px solid rgba(212,196,163,.16) !important;color:#F4EFE4 !important}
.smnLC .smnSel select{background:#10101C !important;color:#F4EFE4 !important}
.smnLC .smnSel-i{color:#c4a35a !important}

/* gold buttons keep their gold fill (readable on dark); ghost buttons go dark */
.cta-ghost,.btnLight{color:#c4a35a !important}
.btn.ghost,.btn-ghost,.ghost-btn,.btn.secondary,a.btn.secondary{background:#141420 !important;color:#c4a35a !important;border-color:rgba(196,163,90,.35) !important}

/* FOOTER — dark (matches homepage, beats site-footer.css locked colors) */
footer.cinFoot.smn-footer{background:#030307 !important;border-top:1px solid rgba(212,196,163,.16) !important}
footer.cinFoot.smn-footer .footGrid a.brand{color:#F4EFE4 !important}
footer.cinFoot.smn-footer .brand em{color:#E2C98A !important}
footer.cinFoot.smn-footer .brand .mk{color:#c4a35a !important}
footer.cinFoot.smn-footer .brand sup{color:#c4a35a !important}
footer.cinFoot.smn-footer .footGrid>div{color:#F4EFE4 !important}
footer.cinFoot.smn-footer .footGrid b{color:#E2C98A !important;font-size:13px !important}
footer.cinFoot.smn-footer .footGrid a:not(.brand){color:#FFFFFF !important;font-size:15.5px !important}
footer.cinFoot.smn-footer .footGrid a:not(.brand):hover{color:#c4a35a !important}
footer.cinFoot.smn-footer .footGrid p{color:#FFFFFF !important}
footer.cinFoot.smn-footer .footFine{color:#EDEAE2 !important;border-top:1px solid rgba(212,196,163,.16) !important}
footer.cinFoot.smn-footer .footFine .patent,footer.cinFoot.smn-footer .footFine a{color:#FFFFFF !important}

/* ============================================================
   READABILITY + WCAG 2.2 AA PASS (Sep 15 2026)
   Fixes contrast failures + tiny/invisible text found by audit.
   ============================================================ */

/* 1) Gold CTAs — deepen the fill so WHITE text clears 4.5:1 (was 3.22:1) */
.btn,.btn-primary,.navCta,.go,a.btn,a.navCta,a.go,button.btn,.btn-gold{
  background:linear-gradient(180deg,#8A6714,#5E4509) !important;
  color:#FFFFFF !important;border-color:#5E4509 !important;
}
.btn *,.navCta *,.go *,.btn-primary *{color:#FFFFFF !important}
/* ghost/secondary buttons stay dark (re-assert over the rule above) */
.btn.ghost,.btn.secondary,a.btn.ghost,a.btn.secondary,.btn-ghost,.ghost-btn{
  background:#141420 !important;color:#c4a35a !important;border:1px solid rgba(196,163,90,.45) !important;
}

/* 2) "Back to home" capsule — was near-black on dark (1.08:1). Now light capsule. */
.backhome,a.backhome,.legal .backhome,.back-home,a.back-home{
  background:#F4EFE4 !important;color:#171410 !important;
  border:1px solid rgba(196,163,90,.55) !important;
}
.backhome:hover,.legal .backhome:hover{background:#FFFFFF !important;color:#0A0A0A !important}

/* 3) Invisible dark class-text on dark cards -> light (guides, kits, receipts) */
.gc-t,.gc-d,.k-desc,.k-bio,.k-name,.k-tag,.k-quote,.k-post,.inc,
.sx-lede,.sx-note,.sx-next,.sx-quiet,.sx-amount,.sx-receipt,
.sx-grid b,.sx-grid span,.sx-grid div,
.confirm-sending,.confirm-sub,.confirm-next,.confirm-body,.confirm-card-row .muted{
  color:#F4EFE4 !important;
}
.gc-t,.sx-grid b{color:#FFFFFF !important}
/* small labels -> solid white (readable, per Peter) */
.gc-k,.k-cat,.k-lane,.k-lbl,.k-own,.k-post-lbl,.k-kitTag,.sx-eyebrow,.idx,.tm,.idea-lbl,.n,.secure,.micnote,.vaultnote,figcaption{
  color:#FFFFFF !important;
}

/* 4) Gold accent TEXT was #9C7423 (4.44:1, a hair under AA) -> brighter gold */
.gc-go,.gc-k,.rel a,.sx-k,.confirm-spark,.confirm-almost,.smnCurNote,
[style*="color:#9C7423"],[style*="color: #9C7423"]{color:#c4a35a !important}
/* green accents (#167A3D ~3.8:1) -> brighter sage-green */
.confirm-lock,[style*="color:#167A3D"],[style*="color: #167A3D"],[style*="color:#16833a"]{color:#8CC79B !important}

/* 5) Light card backgrounds set by class -> dark */
.sx-receipt,.sx-dot,.sx-panel,.sx-grid>div,.confirm-snag{
  background:#10101C !important;background-image:none !important;border-color:rgba(196,163,90,.24) !important;
}
.sx-dot{color:#c4a35a !important}

/* 6) Minimum readable size for the smallest labels (Peter: small type larger) */
.gc-k,.k-cat,.k-lane,.k-lbl,.k-own,.k-post-lbl,.k-kitTag,.sx-eyebrow,.sx-k,
.idx,.tm,.idea-lbl,.n,.secure,.vaultnote,.micnote,.kicker,figcaption{
  font-size:12.5px !important;
}

/* 7) Inline gold-gradient buttons (white text) -> deepen so white clears 4.5:1 */
[style*="linear-gradient(180deg,#B8871C"],[style*="linear-gradient(180deg, #B8871C"],
[style*="linear-gradient(90deg,#B8871C"]{
  background:linear-gradient(180deg,#8A6714,#5E4509) !important;color:#FFFFFF !important;
}
/* 8) Receipt <b> / spans on dark -> readable */
.rcpt-row b,.rcpt-row strong,.rcpt-row span,.sx-receipt b,.sx-receipt span,.sx-receipt strong,.rcpt b{
  color:#FFFFFF !important;
}
.rcpt-h,.rcpt-paid,.rcpt-congrats{color:#8CC79B !important}

/* 9) result "included" grid + footer note, success "how it's made" steps */
.incl-item,.incl-item span,.incl-item div{color:#F4EFE4 !important}
.incl-item b{color:#FFFFFF !important}
.confirm-incl-h{color:#8CC79B !important}
.confirm-foot-note span{color:#F4EFE4 !important}
.confirm-foot-note a{color:#c4a35a !important}
.sx-panel li,.sx-panel p,.sx-panel div,.sx-panel b{color:#F4EFE4 !important}
.sx-panel b{color:#FFFFFF !important}
.sx-panel .sx-k{color:#c4a35a !important}

/* ============================================================
   ADA PASS (Sep 15 2026) — native accessibility, no overlay widget.
   Visible keyboard focus (gold on ink / on cream cards) + reduced-motion.
   ============================================================ */
:where(a,button,input,select,textarea,summary,[tabindex],[role="button"],[role="listbox"],[role="option"]):focus-visible{
  outline:3px solid #c4a35a !important; outline-offset:2px; border-radius:3px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* PASS (Sep 15 2026) — EN/USD out of the marketing top bar (A1). The language/currency
   selector is hidden from the header on the inner marketing pages for a clean bar.
   (Homepage has its own header and is left frozen.) */
.cinTop .smnLC{display:none !important}