/* TwinPare Section Theme System — 2026-08-26
   One brand, three section moods. Palette stays inside the verified TwinPare
   pink / purple / blue / turquoise identity; only emphasis and intensity vary. */

body {
  --section-primary: #BB86FC;
  --section-secondary: #FF6EC7;
  --section-accent: #00E5FF;
  --section-support: #5C6BC0;
  --section-soft: #D4B2FF;
  --section-surface: rgba(20, 18, 38, 0.66);
  --section-surface-strong: rgba(29, 26, 51, 0.82);
  --section-border: rgba(187, 134, 252, 0.18);
  --section-glow: rgba(187, 134, 252, 0.18);
  --section-glow-strong: rgba(255, 110, 199, 0.26);
  --section-gradient: linear-gradient(135deg, #FF6EC7 0%, #BB86FC 48%, #00E5FF 100%);
}

/* Core / ecosystem: balanced TwinPare expression. */
body.theme-core {
  --section-primary: #BB86FC;
  --section-secondary: #FF6EC7;
  --section-accent: #00E5FF;
  --section-support: #5C6BC0;
  --section-soft: #D4B2FF;
  --section-surface: rgba(20, 18, 38, 0.66);
  --section-surface-strong: rgba(29, 26, 51, 0.82);
  --section-border: rgba(187, 134, 252, 0.18);
  --section-glow: rgba(187, 134, 252, 0.18);
  --section-glow-strong: rgba(255, 110, 199, 0.26);
  --section-gradient: linear-gradient(135deg, #FF6EC7 0%, #BB86FC 48%, #00E5FF 100%);
}

/* Health & Fitness: brighter health-tech clarity with more energetic action accents. */
body.theme-health {
  --section-primary: #00E5FF;
  --section-secondary: #FF6EC7;
  --section-accent: #D4B2FF;
  --section-support: #BB86FC;
  --section-soft: #D4B2FF;
  --section-surface: rgba(13, 27, 45, 0.68);
  --section-surface-strong: rgba(18, 38, 61, 0.86);
  --section-border: rgba(0, 229, 255, 0.22);
  --section-glow: rgba(0, 229, 255, 0.20);
  --section-glow-strong: rgba(255, 110, 199, 0.30);
  --section-gradient: linear-gradient(135deg, #FF6EC7 0%, #BB86FC 42%, #00E5FF 100%);
  --mesh-a: rgba(0, 229, 255, 0.30);
  --mesh-b: rgba(212, 178, 255, 0.25);
  --mesh-c: rgba(255, 110, 199, 0.22);
  --mesh-d: rgba(0, 229, 255, 0.20);
}

/* Research: analytical/editorial, with restrained indigo-violet and cyan. */
body.theme-research {
  --section-primary: #BB86FC;
  --section-secondary: #5C6BC0;
  --section-accent: #00E5FF;
  --section-support: #D4B2FF;
  --section-soft: #D4B2FF;
  --section-surface: rgba(16, 14, 34, 0.76);
  --section-surface-strong: rgba(24, 22, 48, 0.90);
  --section-border: rgba(92, 107, 192, 0.24);
  --section-glow: rgba(92, 107, 192, 0.15);
  --section-glow-strong: rgba(187, 134, 252, 0.18);
  --section-gradient: linear-gradient(135deg, #5C6BC0 0%, #BB86FC 58%, #00E5FF 100%);
  --mesh-a: rgba(92, 107, 192, 0.22);
  --mesh-b: rgba(187, 134, 252, 0.16);
  --mesh-c: rgba(255, 110, 199, 0.08);
  --mesh-d: rgba(0, 229, 255, 0.12);
}

/* Twins & Families: softer, calmer and relational. */
body.theme-twins {
  --section-primary: #D4B2FF;
  --section-secondary: #BB86FC;
  --section-accent: #5C6BC0;
  --section-support: #00E5FF;
  --section-soft: #D4B2FF;
  --section-surface: rgba(22, 19, 40, 0.74);
  --section-surface-strong: rgba(31, 27, 52, 0.88);
  --section-border: rgba(212, 178, 255, 0.18);
  --section-glow: rgba(187, 134, 252, 0.12);
  --section-glow-strong: rgba(92, 107, 192, 0.18);
  --section-gradient: linear-gradient(135deg, #5C6BC0 0%, #BB86FC 52%, #D4B2FF 100%);
  --mesh-a: rgba(212, 178, 255, 0.18);
  --mesh-b: rgba(92, 107, 192, 0.16);
  --mesh-c: rgba(255, 110, 199, 0.07);
  --mesh-d: rgba(0, 229, 255, 0.08);
}

/* Section atmosphere. Keep the deep-space TwinPare base, vary only light and mood. */
body.theme-health {
  background:
    radial-gradient(circle at 78% 10%, rgba(0, 229, 255, 0.07), transparent 30%),
    radial-gradient(circle at 18% 42%, rgba(255, 110, 199, 0.055), transparent 34%),
    #0D0B1A;
}
body.theme-research {
  background:
    radial-gradient(circle at 80% 12%, rgba(92, 107, 192, 0.075), transparent 32%),
    radial-gradient(circle at 14% 48%, rgba(187, 134, 252, 0.045), transparent 36%),
    #0D0B1A;
}
body.theme-twins {
  background:
    radial-gradient(circle at 76% 12%, rgba(212, 178, 255, 0.055), transparent 34%),
    radial-gradient(circle at 16% 48%, rgba(92, 107, 192, 0.045), transparent 38%),
    #0D0B1A;
}

/* Aurora intensity is the biggest emotional differentiator. */
body.theme-health .aurora__orb--cyan { opacity: .34; }
body.theme-health .aurora__orb--purple { opacity: .24; }
body.theme-health .aurora__orb--pink { opacity: .22; }

body.theme-research .aurora__orb--cyan { opacity: .13; }
body.theme-research .aurora__orb--purple { opacity: .21; }
body.theme-research .aurora__orb--pink { opacity: .08; }

body.theme-twins .aurora__orb--cyan { opacity: .08; }
body.theme-twins .aurora__orb--purple { opacity: .17; }
body.theme-twins .aurora__orb--pink { opacity: .07; }

/* Shared chrome inherits the active section without changing structure. */
body:not(.theme-core) .v2-header {
  border-bottom-color: var(--section-border);
  box-shadow: 0 12px 44px var(--section-glow);
}
body:not(.theme-core) .v2-search,
body:not(.theme-core) .v2-lang button {
  border-color: var(--section-border);
}
body:not(.theme-core) .v2-lang__menu,
body:not(.theme-core) .v2-mobile-nav {
  background: var(--section-surface-strong);
  border-color: var(--section-border);
}

.v2-nav a { position: relative; }
body.theme-health .v2-nav a[href*="/apps/health/"],
body.theme-research .v2-nav a[href*="/twins/health/research/"],
body.theme-twins .v2-nav a[href$="/twins/"],
body.theme-health .v2-mobile-nav a[href*="/apps/health/"],
body.theme-research .v2-mobile-nav a[href*="/twins/health/research/"],
body.theme-twins .v2-mobile-nav a[href$="/twins/"] {
  color: #fff;
}
body.theme-health .v2-nav a[href*="/apps/health/"]::after,
body.theme-research .v2-nav a[href*="/twins/health/research/"]::after,
body.theme-twins .v2-nav a[href$="/twins/"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  border-radius: 999px;
  background: var(--section-gradient);
  box-shadow: 0 0 14px var(--section-glow-strong);
}

/* Primary actions: energetic in Health, editorial in Research, softer in Twins. */
body.theme-health .btn--primary {
  background: linear-gradient(135deg, #FF6EC7 0%, #BB86FC 46%, #00E5FF 115%);
  border-color: rgba(0, 229, 255, .28);
  box-shadow: 0 12px 34px rgba(255, 110, 199, .18), 0 0 30px rgba(0, 229, 255, .08);
}
body.theme-research .btn--primary {
  background: linear-gradient(135deg, #5C6BC0 0%, #BB86FC 78%);
  border-color: rgba(187, 134, 252, .24);
  box-shadow: 0 10px 28px rgba(92, 107, 192, .14);
}
body.theme-twins .btn--primary {
  background: linear-gradient(135deg, #5C6BC0 0%, #BB86FC 62%, #D4B2FF 120%);
  border-color: rgba(212, 178, 255, .20);
  box-shadow: 0 10px 26px rgba(187, 134, 252, .10);
}

/* Semantic labels and common section accents. */
body:not(.theme-core) :is(.v2-eyebrow, [class*="__eyebrow"], .section-label) {
  color: var(--section-primary);
}
body:not(.theme-core) :is(.source-badge, .hub-chip, .research-highlights__category, .article-card__category) {
  border-color: var(--section-border);
}
body:not(.theme-core) :is(.source-badge, .hub-chip):hover {
  border-color: var(--section-primary);
  background: var(--section-glow);
}

/* Common card/surface treatment. The selectors are intentionally narrow. */
body.theme-health :is(.v2-card, .feature-card--health, .health-phone-card, .health-showcase__hero, .health-v2__showcase) {
  border-color: rgba(0, 229, 255, .18);
}
body.theme-research :is(.research-highlights__card, .article-card--research, .research-series-feature__card, .research-series-intro__copy, .research-series-intro__note, .research-article-nav, .research-takeaways, .research-section) {
  border-color: var(--section-border);
}
body.theme-twins :is(.twin-category-card, .category-hero__image-shell, .ecosystem-pillar, .glass-panel) {
  border-color: var(--section-border);
}

/* Health gets brighter data/action highlights; research/twins keep them calmer. */
body.theme-health :is(.v2-health__areas span, .v2-people span, .health-v2__pill, .health-landing__trust span) {
  border-color: rgba(0, 229, 255, .18);
  background: rgba(0, 229, 255, .065);
}
body.theme-research :is(.research-highlights, .research-series-index, .research-article-nav) {
  box-shadow: 0 18px 54px rgba(8, 8, 24, .22);
}
body.theme-twins :is(.twin-category-card, .ecosystem-pillar) {
  box-shadow: 0 14px 40px rgba(8, 8, 24, .16);
}

/* Footer stays common, but receives a quiet section edge. */
body:not(.theme-core) .v2-footer {
  border-top-color: var(--section-border);
  background:
    linear-gradient(180deg, var(--section-glow), transparent 34%),
    rgba(10, 8, 20, .92);
}
body:not(.theme-core) .v2-footer a:hover { color: var(--section-soft); }

/* Accessible keyboard focus follows the section without relying on color alone. */
body:not(.theme-core) :focus-visible {
  outline-color: var(--section-primary);
}

/* Sitewide image curation — 2026-08-27.
   Reuses existing TwinPare-owned imagery and keeps visuals decorative where the
   adjacent copy already communicates the same meaning. */

/* Twins & Families root hub: give the otherwise text-only hero a strong human
   twin visual, but only on the root hub identified by its knowledge-categories section. */
body.theme-twins .app-page:has(> #knowledge-categories) > .app-hero:first-child .app-hero__inner::after {
  content: '';
  display: block;
  width: min(100%, 1040px);
  aspect-ratio: 16 / 7;
  margin: 38px auto 0;
  border: 1px solid var(--section-border);
  border-radius: 30px;
  background:
    linear-gradient(110deg, rgba(22,19,40,.08), rgba(22,19,40,.28)),
    url('/images/twins-hub/start-here/twin-thumb.jpg') center 38% / cover no-repeat;
  box-shadow: 0 34px 90px rgba(7, 6, 20, .32), 0 0 52px rgba(187,134,252,.07);
}

/* Homepage: "Better together" should feel human and motivational rather than
   repeat another app screenshot. The existing semantic product image is hidden
   and replaced by a decorative Twin Health training visual. */
.v2-together__grid > img { display: none !important; }
.v2-together__grid::after {
  content: '';
  display: block;
  width: 100%;
  min-height: 390px;
  align-self: stretch;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background:
    linear-gradient(115deg, rgba(13,11,26,.04), rgba(13,11,26,.28)),
    url('/images/twins-hub/health/hero.webp') center / cover no-repeat;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

/* Homepage origin story: subtle genetics/twin research imagery supports the
   founder story without turning the section into another image card. */
.v2-origin__statement {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(20,18,38,.72) !important;
}
.v2-origin__statement::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(13,11,26,.94) 10%, rgba(13,11,26,.68) 62%, rgba(13,11,26,.42)),
    url('/images/twins-hub/science/hero-v2.jpg') center / cover no-repeat;
}
.v2-origin__statement::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 82% 18%, rgba(187,134,252,.22), transparent 42%);
}

@media (max-width: 720px) {
  body.theme-twins .app-page:has(> #knowledge-categories) > .app-hero:first-child .app-hero__inner::after {
    aspect-ratio: 4 / 3;
    margin-top: 28px;
    border-radius: 22px;
    background-position: center;
  }
  .v2-together__grid::after {
    min-height: 310px;
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.theme-core) .aurora__orb { animation: none; }
}