/* Main-site colors, without altering scientific figures, video or canvas. */
:root[data-site-theme] {
  --research-bg: #fff;
  --research-soft: #f6f8fb;
  --research-line: #e7ebf0;
  --research-ink: #242424;
  --research-primary: #1978ff;
  --research-muted: color-mix(in oklab, var(--research-ink) 68%, var(--research-bg));
  --research-tint: color-mix(in oklab, var(--research-primary) 10%, var(--research-bg));

  /* The supplied pages use these variables for their reading surfaces. */
  --ink: var(--research-ink) !important;
  --navy: var(--research-ink) !important;
  --muted: var(--research-muted) !important;
  --line: var(--research-line) !important;
  --white: var(--research-bg) !important;
  --paper: var(--research-bg) !important;
  --page: var(--research-bg) !important;
  --pale: var(--research-soft) !important;
  --soft: var(--research-soft) !important;
  --surface: var(--research-soft) !important;
  --surface-strong: var(--research-line) !important;
  --soft-blue: var(--research-tint) !important;
  --accent-light: var(--research-tint) !important;
  --accent: var(--research-primary) !important;
  --blue: var(--research-primary) !important;
  --blue-dark: var(--research-primary) !important;
  --teal: var(--research-primary) !important;
  --background: var(--research-bg) !important;
  --foreground: var(--research-ink) !important;
  --muted-foreground: var(--research-muted) !important;
  --primary: var(--research-primary) !important;
  --border: var(--research-line) !important;
  --color-background: var(--research-bg) !important;
  --color-foreground: var(--research-ink) !important;
  --color-card: var(--research-bg) !important;
  --color-border: var(--research-line) !important;
  --color-primary: var(--research-primary) !important;
}

:root[data-site-theme='dark'] {
  --research-bg: #202124;
  --research-soft: #292b2f;
  --research-line: #3d4147;
  --research-ink: #fff;
}

html[data-site-theme] body,
html[data-site-theme] .publication-page {
  background: var(--research-bg) !important;
  color: var(--research-ink) !important;
}

html[data-site-theme] :is(.site-header, .topbar) {
  background: var(--research-bg) !important;
  border-color: var(--research-line) !important;
}

/* Reading must not depend on the project's reveal animation script loading. */
html[data-site-theme] .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Explicit light surfaces in the original CSS need their own overrides. */
html[data-site-theme] :is(.hero, .data-card, .code-card, .video-card, .metric-options,
  .resource, .copy-button, .motion-toggle, .menu-toggle, .training-outcomes span,
  .baseline-picker label, .demo-selector-tab, .demo-selector-arrow,
  .terrain-replay-button, .model-replay-button, .hssd-video-card,
  .protocol-table, .result-row, .results-table, .resource-links a, dialog, pre) {
  background: var(--research-bg) !important;
  border-color: var(--research-line) !important;
  color: var(--research-ink) !important;
}

html[data-site-theme] :is(.comparison-section, .abstract-section, .publication-footer,
  .site-footer, footer, thead th, .results-table th, .bar-track) {
  background: var(--research-soft) !important;
  border-color: var(--research-line) !important;
  color: var(--research-muted) !important;
}

html[data-site-theme] :is(.ours, .results-table tr.ours, .terrain-option.selected,
  .frame-picker button.selected, .equation-note) {
  background: var(--research-tint) !important;
  color: var(--research-ink) !important;
}

html[data-site-theme] :is(.resource.primary, .baseline-picker label.selected,
  .demo-selector-tab[aria-selected='true'], .terrain-play-button, .model-play-button,
  .model-ours-chip, .resource-button.explore-link) {
  background: var(--research-primary) !important;
  border-color: var(--research-primary) !important;
  color: #fff !important;
}

html[data-site-theme] .resource-button.explore-link .button-copy strong {
  color: #fff !important;
}

/* DR-WM predates the shared color variables. */
html[data-site-theme] :is(.project-name, .publication-authors,
  .publication-affiliations sup, .teaser-section h2 span, .teaser-caption strong,
  .observation-pair .ours-label, .outcome-caption strong, .comparison-details > summary,
  .terrain-row-heading h3 span, .model-video-card.ours figcaption, .action-number) {
  color: var(--research-primary) !important;
}

html[data-site-theme='dark'] :is(h1, h2, h3, h4, .site-name, .title-project,
  .title-description, .paper-section p b, .main-figure figcaption b,
  .paper-figure figcaption b, .protocol-table span, .results-table tr.ours td,
  .ours th, .ours td, .result strong) {
  color: var(--research-ink) !important;
}

html[data-site-theme='dark'] :is(.prose, .affiliations, .affiliation, .authors,
  .nav-links a, .site-header nav a, .publication-affiliations, .publication-author-notes,
  .section-intro, .input-caption, .outcome-caption, .comparison-caption,
  .conditioning-note, .media-caption, .method-note, .resource-status,
  .publication-footer .footer-note, .publication-footer .footer-credit,
  .model-row-heading h3, .comparison-horizon-note, .teaser-pair figcaption span,
  .bar-name, .bar-value, .hero-lede, .hero-affiliations .corresponding,
  .paper-section > p, .title-nav, .hssd-video-card figcaption,
  .main-figure figcaption, .paper-figure figcaption, .button-copy small) {
  color: var(--research-muted) !important;
}

html[data-site-theme='dark'] .resource-button:not(.explore-link) {
  background: var(--research-bg) !important;
  border-color: var(--research-line) !important;
}

/* Figures retain white backplates so embedded text and logos remain legible. */
html[data-site-theme='dark'] :is(.figure-button, .zoomable, .paper-figure img,
  .main-figure img, .footer-brand img, .institution-logo img) {
  background: #fff;
}

html[data-site-theme='dark'] .institution-logo img {
  box-sizing: border-box;
  padding: 4px;
  border-radius: 4px;
}