/* SHANX GLOBAL WORLD RUNTIME — themes must control the entire site */

:root{
  --world-on-dark:#f4f8f6;
  --world-on-dark-muted:rgba(244,248,246,.74);
  --world-gold:#d8bd8e;
}

html[data-theme]{
  background:var(--living-bg);
  color:var(--living-ink);
}
html[data-theme] body{
  background:var(--living-bg)!important;
  color:var(--living-ink)!important;
  transition:background .55s ease,color .38s ease;
}

/* Header follows the selected world */
html[data-theme] .site-header{
  background:color-mix(in srgb,var(--living-surface-strong) 88%,transparent)!important;
  color:var(--living-ink)!important;
  border-bottom-color:var(--living-line)!important;
  box-shadow:0 10px 34px color-mix(in srgb,var(--living-dark) 7%,transparent)!important;
}
html[data-theme] .brand-lockup small{color:var(--living-muted)!important}
html[data-theme] .site-header nav a{color:var(--living-ink)!important}
html[data-theme] .nav-cta{border-color:var(--living-line)!important}

/* Light / editorial rooms */
html[data-theme] #experience,
html[data-theme] #products,
html[data-theme] #method,
html[data-theme] #frontier,
html[data-theme] #contact{
  background:
    radial-gradient(circle at 84% 14%,var(--living-glow),transparent 27%),
    linear-gradient(155deg,var(--living-bg),color-mix(in srgb,var(--living-surface-strong) 86%,var(--living-bg)))!important;
  color:var(--living-ink)!important;
  border-color:var(--living-line)!important;
  transition:background .58s ease,color .38s ease,border-color .38s ease;
}
html[data-theme] #products .lede,
html[data-theme] #method .lede,
html[data-theme] #frontier .lede,
html[data-theme] #contact .legal-note,
html[data-theme] #experience p{
  color:var(--living-muted)!important;
}
html[data-theme] #method .method-line,
html[data-theme] #frontier .method-line{
  background:color-mix(in srgb,var(--living-surface) 76%,transparent)!important;
  border-color:var(--living-line)!important;
  box-shadow:0 18px 52px color-mix(in srgb,var(--living-dark) 5%,transparent)!important;
}
html[data-theme] #method .method-line>div,
html[data-theme] #frontier .method-line>div{
  border-color:var(--living-line)!important;
  color:var(--living-ink)!important;
}
html[data-theme] #method .method-line p,
html[data-theme] #frontier .method-line p{
  color:var(--living-muted)!important;
}

/* Product cards follow the world rather than fixed green/cream palettes */
html[data-theme] .product{
  background:
    radial-gradient(circle at 88% 12%,var(--living-glow),transparent 26%),
    linear-gradient(145deg,var(--living-surface-strong),color-mix(in srgb,var(--living-surface) 86%,var(--living-bg)))!important;
  color:var(--living-ink)!important;
  border-color:var(--living-line)!important;
  box-shadow:0 18px 50px color-mix(in srgb,var(--living-dark) 6%,transparent)!important;
}
html[data-theme] .product p,
html[data-theme] .product .availability{color:var(--living-muted)!important}
html[data-theme] .product-tags span{
  color:var(--living-ink)!important;
  background:color-mix(in srgb,var(--living-surface-strong) 66%,transparent)!important;
  border-color:var(--living-line)!important;
}
html[data-theme] .product-top small{color:var(--living-accent)!important}

/* Deep rooms retain contrast but inherit each world's accent and atmosphere */
html[data-theme] #capabilities,
html[data-theme] #responsibility,
html[data-theme] #founder{
  background:
    radial-gradient(circle at 84% 12%,var(--living-glow),transparent 28%),
    linear-gradient(145deg,var(--living-dark),color-mix(in srgb,var(--living-dark) 82%,var(--living-accent)))!important;
  color:var(--world-on-dark)!important;
  border-color:color-mix(in srgb,var(--world-on-dark) 10%,transparent)!important;
  transition:background .58s ease,color .38s ease;
}
html[data-theme] #capabilities .eyebrow,
html[data-theme] #responsibility .eyebrow,
html[data-theme] #founder .eyebrow{color:color-mix(in srgb,var(--living-accent) 62%,white)!important}
html[data-theme] #capabilities h2,
html[data-theme] #responsibility h2,
html[data-theme] #founder h2{color:var(--world-on-dark)!important}
html[data-theme] #capabilities h2 em,
html[data-theme] #responsibility h2 em,
html[data-theme] #founder h2 em{color:color-mix(in srgb,var(--living-accent-2) 72%,white)!important}

html[data-theme] #capabilities .ownership-grid,
html[data-theme] #responsibility .ownership-grid,
html[data-theme] #founder .ownership-grid{
  background:transparent!important;
  gap:12px!important;
  box-shadow:none!important;
}
html[data-theme] #capabilities .ownership-grid>div,
html[data-theme] #responsibility .ownership-grid>div,
html[data-theme] #founder .ownership-grid>div{
  background:color-mix(in srgb,var(--living-dark) 82%,white 4%)!important;
  border:1px solid color-mix(in srgb,var(--world-on-dark) 10%,transparent)!important;
  border-radius:22px!important;
  color:var(--world-on-dark)!important;
  box-shadow:0 14px 36px color-mix(in srgb,var(--living-dark) 24%,transparent)!important;
}
html[data-theme] #capabilities .ownership-grid>div:hover,
html[data-theme] #responsibility .ownership-grid>div:hover,
html[data-theme] #founder .ownership-grid>div:hover{
  background:color-mix(in srgb,var(--living-dark) 72%,var(--living-accent) 12%)!important;
  transform:none!important;
}
html[data-theme] #capabilities .ownership-grid span,
html[data-theme] #responsibility .ownership-grid span,
html[data-theme] #founder .ownership-grid span{color:color-mix(in srgb,var(--living-accent-2) 55%,white)!important}
html[data-theme] #capabilities .ownership-grid p,
html[data-theme] #responsibility .ownership-grid p,
html[data-theme] #founder .ownership-grid p{color:var(--world-on-dark-muted)!important}
html[data-theme] #founder .ownership-grid a{color:var(--world-on-dark)!important}

/* HEARTBEAT room follows the chosen world */
html[data-theme] .latest-evolution{
  background:
    radial-gradient(circle at 88% 14%,var(--living-glow),transparent 28%),
    linear-gradient(145deg,var(--living-dark),color-mix(in srgb,var(--living-dark) 80%,var(--living-accent)))!important;
  color:var(--world-on-dark)!important;
}
html[data-theme] .latest-evolution .eyebrow{color:color-mix(in srgb,var(--living-accent) 58%,white)!important}
html[data-theme] .latest-evolution .lede{color:var(--world-on-dark-muted)!important}
html[data-theme] .latest-evolution h2 em{color:color-mix(in srgb,var(--living-accent) 48%,white)!important}
html[data-theme] .latest-evolution .button.primary{
  background:var(--world-on-dark)!important;
  color:var(--living-dark)!important;
  border-color:var(--world-on-dark)!important;
}
html[data-theme] .latest-proof{border-color:color-mix(in srgb,var(--world-on-dark) 16%,transparent)!important}
html[data-theme] .latest-proof div{border-color:color-mix(in srgb,var(--world-on-dark) 10%,transparent)!important}
html[data-theme] .latest-proof span{color:color-mix(in srgb,var(--living-accent) 58%,white)!important}

/* Contact/footer */
html[data-theme] #contact .contact-link{color:var(--living-ink)!important;border-color:var(--living-ink)!important}
html[data-theme] #copy-founder-email{color:var(--living-ink)!important;border-color:var(--living-line)!important;border-radius:12px!important}
html[data-theme] footer{
  background:color-mix(in srgb,var(--living-surface-strong) 86%,var(--living-bg))!important;
  color:var(--living-muted)!important;
  border-color:var(--living-line)!important;
}
html[data-theme] footer a{color:var(--living-ink)!important}

/* Theme cards: unmistakable active state and fully clickable preview area */
.theme-card{position:relative!important;isolation:isolate;cursor:pointer!important}
.theme-card>*{pointer-events:none!important}
.theme-card[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--living-accent) 72%,transparent)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--living-accent) 16%,transparent),0 18px 42px color-mix(in srgb,var(--living-dark) 9%,transparent)!important;
}
.theme-card[aria-pressed="true"]:before{
  content:"✓ ACTIVE";
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  padding:5px 8px;
  border-radius:999px;
  background:var(--living-accent);
  color:white;
  font-size:7px;
  font-weight:800;
  letter-spacing:.10em;
}

/* Theme transition polish */
html[data-theme] main>section,
html[data-theme] .product,
html[data-theme] .ownership-grid>div,
html[data-theme] .site-header,
html[data-theme] footer{
  transition:background .58s cubic-bezier(.2,.8,.2,1),color .38s ease,border-color .38s ease,box-shadow .38s ease!important;
}

/* Dark worlds get a genuinely immersive page rather than a light page with dark accents */
html[data-theme="midnight"] #experience,
html[data-theme="midnight"] #products,
html[data-theme="midnight"] #method,
html[data-theme="midnight"] #frontier,
html[data-theme="midnight"] #contact,
html[data-theme="shadow"] #experience,
html[data-theme="shadow"] #products,
html[data-theme="shadow"] #method,
html[data-theme="shadow"] #frontier,
html[data-theme="shadow"] #contact{
  background:
    radial-gradient(circle at 82% 14%,var(--living-glow),transparent 28%),
    linear-gradient(150deg,var(--living-bg),var(--living-surface-strong))!important;
}

@media(max-width:980px){
  html[data-theme] .site-header nav{
    background:color-mix(in srgb,var(--living-surface-strong) 92%,transparent)!important;
    border-color:var(--living-line)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html[data-theme] main>section,
  html[data-theme] .product,
  html[data-theme] .ownership-grid>div,
  html[data-theme] .site-header,
  html[data-theme] footer{transition:none!important}
}