/* Theme Transition component */

html[data-page-initial-theme="blue"] {
  --theme-bg: var(--bg-signal);
}

html[data-page-initial-theme="surface"] {
  --theme-bg: var(--bg-page);
}

html[data-page-initial-theme="surface-darker"] {
  --theme-bg: var(--bg-surface-darker);
}

html[data-page-initial-theme="mineral-soft"] {
  --theme-bg: var(--bg-mineral-soft);
}

html[data-page-initial-theme="surface-elevated"] {
  --theme-bg: var(--bg-surface);
}

html[data-page-initial-theme="light"] {
  --theme-bg: var(--bg-page);
}

html[data-page-initial-theme="mineral"] {
  --theme-bg: var(--mineral);
}

html[data-page-initial-theme="mineral-deep"] {
  --theme-bg: var(--bg-mineral-deep);
}

html[data-page-initial-theme="dark"] {
  --theme-bg: var(--bg-dark);
}

html[data-page-initial-theme="blue"] body,
html[data-page-initial-theme="dark"] body,
html[data-page-initial-theme="mineral"] body,
html[data-page-initial-theme="mineral-deep"] body {
  color: var(--text-inverse);
}

html[data-page-initial-theme="light"] body,
html[data-page-initial-theme="surface"] body,
html[data-page-initial-theme="surface-darker"] body,
html[data-page-initial-theme="mineral-soft"] body,
html[data-page-initial-theme="surface-elevated"] body {
  color: var(--text-primary);
}

html[data-page-initial-theme="blue"] .site-header[data-nav]:not(.is-nav-only),
html[data-page-initial-theme="dark"] .site-header[data-nav]:not(.is-nav-only),
html[data-page-initial-theme="mineral"] .site-header[data-nav]:not(.is-nav-only),
html[data-page-initial-theme="mineral-deep"] .site-header[data-nav]:not(.is-nav-only),
html.theme-on-dark .site-header[data-nav]:not(.is-nav-only) {
  color: var(--text-inverse);
}

html[data-page-initial-theme="light"] .site-header[data-nav]:not(.is-nav-only),
html[data-page-initial-theme="surface"] .site-header[data-nav]:not(.is-nav-only),
html[data-page-initial-theme="surface-darker"] .site-header[data-nav]:not(.is-nav-only),
html[data-page-initial-theme="mineral-soft"] .site-header[data-nav]:not(.is-nav-only),
html[data-page-initial-theme="surface-elevated"] .site-header[data-nav]:not(.is-nav-only),
html.theme-on-light .site-header[data-nav]:not(.is-nav-only) {
  color: var(--text-primary);
}

html {
  background: var(--theme-bg, var(--bg-page));
}

html.theme-no-transition,
html.theme-no-transition body,
html.theme-no-transition body::before,
html.theme-no-transition .site-header,
html.theme-no-transition .site-header .site-logo,
html.theme-no-transition .menu-toggle {
  transition: none !important;
}

html:has(body.menu-open) {
  background: var(--bg-dark);
}

body {
  position: relative;
  background: transparent;
  color: var(--text-primary);

  transition:
    color var(--transition-base);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;

  background-color: var(--theme-bg, var(--bg-page));

  transition:
    background-color 1300ms cubic-bezier(.22, .72, .36, 1);

  pointer-events: none;
  will-change: background-color;
}

.section-shell {
  background: transparent;
}

/* -------------------------------------------------------------------------
   Theme-adaptive utilities — transparent sections flip text, kickers, pills,
   and chips when the environmental bg (scroll probe) disagrees with
   section data-theme. See theme-transition/README.md.
   ------------------------------------------------------------------------- */

.theme-line-art {
  color: currentColor;
  pointer-events: none;
}

.theme-surface-chip {
  transition: background-color var(--transition-base);
}

.section-shell[data-theme="light"] .theme-surface-chip,
.section-shell[data-theme="surface"] .theme-surface-chip,
.section-shell[data-theme="surface-darker"] .theme-surface-chip,
.section-shell[data-theme="mineral-soft"] .theme-surface-chip,
.section-shell[data-theme="surface-elevated"] .theme-surface-chip {
  background: rgba(23, 22, 27, 0.06);
}

.section-shell[data-theme="dark"] .theme-surface-chip,
.section-shell[data-theme="blue"] .theme-surface-chip,
.section-shell[data-theme="mineral"] .theme-surface-chip,
.section-shell[data-theme="mineral-deep"] .theme-surface-chip {
  background: rgba(255, 255, 255, 0.08);
}

/* Cross-theme section text — environmental bg drives legibility */
html.theme-on-dark body,
html.theme-on-dark .section-shell:not([data-theme]),
html.theme-on-dark .section-shell[data-theme="light"],
html.theme-on-dark .section-shell[data-theme="surface"],
html.theme-on-dark .section-shell[data-theme="surface-darker"],
html.theme-on-dark .section-shell[data-theme="mineral-soft"],
html.theme-on-dark .section-shell[data-theme="surface-elevated"] {
  color: var(--text-inverse);
}

html.theme-on-light body,
html.theme-on-light .section-shell,
html.theme-on-light .section-shell:not([data-theme]),
html.theme-on-light .section-shell[data-theme="dark"],
html.theme-on-light .section-shell[data-theme="blue"],
html.theme-on-light .section-shell[data-theme="mineral"],
html.theme-on-light .section-shell[data-theme="mineral-deep"] {
  color: var(--text-primary);
}

html.theme-on-dark .section-shell[data-theme="light"] .section-kicker,
html.theme-on-dark .section-shell[data-theme="surface"] .section-kicker,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .section-kicker,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .section-kicker,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .section-kicker {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.52);
}

html.theme-on-light .section-shell[data-theme="dark"] .section-kicker,
html.theme-on-light .section-shell[data-theme="blue"] .section-kicker,
html.theme-on-light .section-shell[data-theme="mineral"] .section-kicker,
html.theme-on-light .section-shell[data-theme="mineral-deep"] .section-kicker {
  background: var(--section-kicker-bg);
  color: var(--text-secondary);
}

/* Entry meta strips — legible when light hero sits on dark environmental bg */
html.theme-on-dark .section-shell[data-theme="light"] .library-entry-meta-strip > .library-entry-meta-item span,
html.theme-on-dark .section-shell[data-theme="surface"] .library-entry-meta-strip > .library-entry-meta-item span,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .library-entry-meta-strip > .library-entry-meta-item span,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .library-entry-meta-strip > .library-entry-meta-item span,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .library-entry-meta-strip > .library-entry-meta-item span,
html.theme-on-dark .section-shell[data-theme="light"] .case-meta > .case-meta-item span,
html.theme-on-dark .section-shell[data-theme="surface"] .case-meta > .case-meta-item span,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .case-meta > .case-meta-item span,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .case-meta > .case-meta-item span,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .case-meta > .case-meta-item span {
  color: var(--text-inverse-muted);
}

html.theme-on-dark .section-shell[data-theme="light"] .library-entry-meta-strip > .library-entry-meta-item span::after,
html.theme-on-dark .section-shell[data-theme="surface"] .library-entry-meta-strip > .library-entry-meta-item span::after,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .library-entry-meta-strip > .library-entry-meta-item span::after,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .library-entry-meta-strip > .library-entry-meta-item span::after,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .library-entry-meta-strip > .library-entry-meta-item span::after,
html.theme-on-dark .section-shell[data-theme="light"] .case-meta > .case-meta-item span::after,
html.theme-on-dark .section-shell[data-theme="surface"] .case-meta > .case-meta-item span::after,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .case-meta > .case-meta-item span::after,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .case-meta > .case-meta-item span::after,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .case-meta > .case-meta-item span::after {
  background: var(--divider-subtle-dark);
}

html.theme-on-dark .section-shell[data-theme="light"] .library-entry-meta-strip > .library-entry-meta-item strong,
html.theme-on-dark .section-shell[data-theme="surface"] .library-entry-meta-strip > .library-entry-meta-item strong,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .library-entry-meta-strip > .library-entry-meta-item strong,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .library-entry-meta-strip > .library-entry-meta-item strong,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .library-entry-meta-strip > .library-entry-meta-item strong,
html.theme-on-dark .section-shell[data-theme="light"] .case-meta > .case-meta-item strong,
html.theme-on-dark .section-shell[data-theme="surface"] .case-meta > .case-meta-item strong,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .case-meta > .case-meta-item strong,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .case-meta > .case-meta-item strong,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .case-meta > .case-meta-item strong {
  color: var(--text-inverse);
  opacity: 1;
}

@media (max-width: 980px) {
  html.theme-on-dark .section-shell[data-theme="light"] .library-entry-meta-strip > .library-entry-meta-item span,
  html.theme-on-dark .section-shell[data-theme="surface"] .library-entry-meta-strip > .library-entry-meta-item span,
  html.theme-on-dark .section-shell[data-theme="surface-darker"] .library-entry-meta-strip > .library-entry-meta-item span,
  html.theme-on-dark .section-shell[data-theme="mineral-soft"] .library-entry-meta-strip > .library-entry-meta-item span,
  html.theme-on-dark .section-shell[data-theme="surface-elevated"] .library-entry-meta-strip > .library-entry-meta-item span,
  html.theme-on-dark .section-shell[data-theme="light"] .case-meta > .case-meta-item span,
  html.theme-on-dark .section-shell[data-theme="surface"] .case-meta > .case-meta-item span,
  html.theme-on-dark .section-shell[data-theme="surface-darker"] .case-meta > .case-meta-item span,
  html.theme-on-dark .section-shell[data-theme="mineral-soft"] .case-meta > .case-meta-item span,
  html.theme-on-dark .section-shell[data-theme="surface-elevated"] .case-meta > .case-meta-item span {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.52);
  }

  html.theme-on-light .section-shell[data-theme="dark"] .library-entry-meta-strip > .library-entry-meta-item span,
  html.theme-on-light .section-shell[data-theme="blue"] .library-entry-meta-strip > .library-entry-meta-item span,
  html.theme-on-light .section-shell[data-theme="mineral"] .library-entry-meta-strip > .library-entry-meta-item span,
  html.theme-on-light .section-shell[data-theme="mineral-deep"] .library-entry-meta-strip > .library-entry-meta-item span,
  html.theme-on-light .section-shell[data-theme="dark"] .case-meta > .case-meta-item span,
  html.theme-on-light .section-shell[data-theme="blue"] .case-meta > .case-meta-item span,
  html.theme-on-light .section-shell[data-theme="mineral"] .case-meta > .case-meta-item span,
  html.theme-on-light .section-shell[data-theme="mineral-deep"] .case-meta > .case-meta-item span {
    background: var(--section-kicker-bg);
    color: var(--text-secondary);
  }
}

/* Cross-theme pill buttons — dark sections visible over a light global background */
html.theme-on-light .section-shell[data-theme="dark"] .btn--pill,
html.theme-on-light .section-shell[data-theme="blue"] .btn--pill,
html.theme-on-light .section-shell[data-theme="mineral"] .btn--pill,
html.theme-on-light .section-shell[data-theme="mineral-deep"] .btn--pill,
html.theme-on-light .section-shell[data-theme="dark"] .closing-cta,
html.theme-on-light .section-shell[data-theme="blue"] .closing-cta,
html.theme-on-light .section-shell[data-theme="mineral"] .closing-cta,
html.theme-on-light .section-shell[data-theme="mineral-deep"] .closing-cta {
  border: var(--border-interactive-light);
}

html.theme-on-light .section-shell[data-theme="dark"] .btn--pill .btn-icon,
html.theme-on-light .section-shell[data-theme="blue"] .btn--pill .btn-icon,
html.theme-on-light .section-shell[data-theme="mineral"] .btn--pill .btn-icon,
html.theme-on-light .section-shell[data-theme="mineral-deep"] .btn--pill .btn-icon,
html.theme-on-light .section-shell[data-theme="dark"] .closing-cta .btn-icon,
html.theme-on-light .section-shell[data-theme="blue"] .closing-cta .btn-icon,
html.theme-on-light .section-shell[data-theme="mineral"] .closing-cta .btn-icon,
html.theme-on-light .section-shell[data-theme="mineral-deep"] .closing-cta .btn-icon {
  background: rgba(23, 22, 27, 0.06);
}

/* Cross-theme pill buttons — light sections visible over a dark global background */
html.theme-on-dark .section-shell[data-theme="light"] .btn--pill,
html.theme-on-dark .section-shell[data-theme="surface"] .btn--pill,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .btn--pill,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .btn--pill,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .btn--pill,
html.theme-on-dark .section-shell[data-theme="light"] .closing-cta,
html.theme-on-dark .section-shell[data-theme="surface"] .closing-cta,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .closing-cta,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .closing-cta,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .closing-cta {
  border: var(--border-interactive);
}

html.theme-on-dark .section-shell[data-theme="light"] .btn--pill .btn-icon,
html.theme-on-dark .section-shell[data-theme="surface"] .btn--pill .btn-icon,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .btn--pill .btn-icon,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .btn--pill .btn-icon,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .btn--pill .btn-icon,
html.theme-on-dark .section-shell[data-theme="light"] .closing-cta .btn-icon,
html.theme-on-dark .section-shell[data-theme="surface"] .closing-cta .btn-icon,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .closing-cta .btn-icon,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .closing-cta .btn-icon,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .closing-cta .btn-icon {
  background: rgba(255, 255, 255, 0.08);
}

/* Cross-theme surface chips — icon circles, eyebrow markers, etc. */
html.theme-on-light .section-shell[data-theme="dark"] .theme-surface-chip,
html.theme-on-light .section-shell[data-theme="blue"] .theme-surface-chip,
html.theme-on-light .section-shell[data-theme="mineral"] .theme-surface-chip,
html.theme-on-light .section-shell[data-theme="mineral-deep"] .theme-surface-chip {
  background: rgba(23, 22, 27, 0.06);
}

html.theme-on-dark .section-shell[data-theme="light"] .theme-surface-chip,
html.theme-on-dark .section-shell[data-theme="surface"] .theme-surface-chip,
html.theme-on-dark .section-shell[data-theme="surface-darker"] .theme-surface-chip,
html.theme-on-dark .section-shell[data-theme="mineral-soft"] .theme-surface-chip,
html.theme-on-dark .section-shell[data-theme="surface-elevated"] .theme-surface-chip {
  background: rgba(255, 255, 255, 0.08);
}

/* Case-study / article copy — scoped element overrides for transparent bands */
html.theme-on-dark .case-copy,
html.theme-on-dark .case-meta span,
html.theme-on-dark .case-copy--inverse,
html.theme-on-dark .poi-system-body-text,
html.theme-on-dark .poi-platform-body-text,
html.theme-on-dark .case-horizontal-copy .case-copy,
html.theme-on-dark .case-outcome__text,
html.theme-on-dark .case-outcome__person,
html.theme-on-dark .section-shell[data-theme="light"] .article-pullquote,
html.theme-on-dark .section-shell[data-theme="light"] .article-figure figcaption,
html.theme-on-dark .section-shell[data-theme="light"] .article-gallery__item figcaption,
html.theme-on-dark .section-shell[data-theme="light"] .article-further-reading > p,
html.theme-on-dark .section-shell[data-theme="light"] .article-further-reading li,
html.theme-on-dark .section-shell[data-theme="light"] .article-body a {
  color: var(--text-inverse);
}

@media (hover: hover) and (pointer: fine) {
  html.theme-on-dark .section-shell[data-theme="light"] .article-body a:hover {
    color: var(--text-inverse-strong);
  }
}

html.theme-on-light .case-copy,
html.theme-on-light .case-meta span,
html.theme-on-light .case-copy--inverse,
html.theme-on-light .poi-system-body-text,
html.theme-on-light .poi-platform-body-text,
html.theme-on-light .case-horizontal-copy .case-copy,
html.theme-on-light .case-outcome__text,
html.theme-on-light .case-outcome__person {
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    transition-duration: 0.01ms !important;
  }
}