/* Appearance is a visitor preference. Product screenshots stay in their
   source palette; the surrounding marketing surfaces use the Ink family. */
html[data-theme="light"] { color-scheme: light; }
.theme-logo--dark { display: none !important; }
html[data-theme="dark"] .theme-logo--light { display: none !important; }
html[data-theme="dark"] .theme-logo--dark { display: block !important; }

.theme-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--truo-ink);
  background: rgb(255 255 255 / 55%);
  border: 1px solid rgb(255 255 255 / 44%);
  border-radius: var(--truo-radius-pill);
  cursor: pointer;
  backdrop-filter: blur(14px);
}
html.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { background: var(--truo-blue-tint); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle__label { display: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (min-width: 1440px) {
  .theme-toggle { width: auto; padding-inline: 14px; }
  .theme-toggle__label { display: inline; }
}

.preview-page-header__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.preview-page-header__actions > a { display: flex; align-items: center; gap: 7px; color: var(--truo-blue-dark); font-size: 13px; font-weight: 700; text-decoration: none; }
.preview-page-header__actions > a svg { width: 15px; height: 15px; }

html[data-theme="dark"] {
  color-scheme: dark;
  --truo-canvas: #10151c;
  --truo-mist: #1b222d;
  --truo-line: #35404e;
  --truo-slate: #b1bac6;
  --truo-blue-tint: #243a63;
  --revc-canvas: #0c1118;
  --theme-surface: #18212b;
  --theme-surface-raised: #202b38;
  --theme-text: #f3f6fa;
  --theme-accent: #a8c2ff;
  --truo-color-background: var(--truo-canvas);
  --truo-color-surface: var(--theme-surface);
  --truo-color-surface-muted: var(--truo-mist);
  --truo-color-text: var(--theme-text);
  --truo-color-text-muted: var(--truo-slate);
  --truo-color-border: var(--truo-line);
  --truo-color-focus: var(--theme-accent);
}

html[data-theme="dark"] body { color: var(--theme-text); }
html[data-theme="dark"] .accent,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .link-arrow,
html[data-theme="dark"] .card__label { color: var(--theme-accent); }
html[data-theme="dark"] .btn--secondary { color: var(--theme-text); }
html[data-theme="dark"] .btn--secondary:hover { color: var(--theme-accent); }

/* Header stays legible against the unchanged photographic hero. */
html[data-theme="dark"] .page-home .header,
html[data-theme="dark"] .page-home .header__nav { color: var(--theme-text); }
html[data-theme="dark"] .page-home .header__nav,
html[data-theme="dark"] .page-home .header__actions .btn--secondary,
html[data-theme="dark"] .page-home .theme-toggle {
  background: rgb(16 21 28 / 82%);
  border-color: rgb(255 255 255 / 23%);
}
html[data-theme="dark"] .page-home .header__nav > a,
html[data-theme="dark"] .page-home .header__nav > div > button,
html[data-theme="dark"] .page-home .header__actions .btn--secondary,
html[data-theme="dark"] .page-home .theme-toggle { color: var(--theme-text); }
html[data-theme="dark"] .page-home .header__nav > a:hover,
html[data-theme="dark"] .page-home .header__nav > div > button:hover { color: var(--theme-accent); }
html[data-theme="dark"] .page-home .hero__eyebrow,
html[data-theme="dark"] .page-home .hero__stats {
  color: var(--theme-text);
  background: rgb(16 21 28 / 82%);
  border-color: rgb(255 255 255 / 24%);
}
html[data-theme="dark"] .page-home .hero__eyebrow::before { background: var(--theme-accent); }
html[data-theme="dark"] .menu,
html[data-theme="dark"] .mobile-menu { color: var(--theme-text); background: var(--theme-surface-raised); border-color: var(--truo-line); }
html[data-theme="dark"] .menu__item:hover { background: var(--truo-mist); }
html[data-theme="dark"] .menu__icon[data-layer="record"] { background: var(--truo-ink); }

/* Two surface steps are enough to keep the card layout readable. */
html[data-theme="dark"] .page-home .cost,
html[data-theme="dark"] .page-home .workspace-section,
html[data-theme="dark"] .page-home #trade-finance,
html[data-theme="dark"] .page-home .faq-section,
html[data-theme="dark"] .page-home .footer {
  color: var(--theme-text);
  background: var(--theme-surface);
}
html[data-theme="dark"] .page-home .cost__card,
html[data-theme="dark"] .page-home #trade-finance .card,
html[data-theme="dark"] .page-home .faq-section .faq__item {
  color: var(--theme-text);
  background: var(--theme-surface-raised);
  border-color: var(--truo-line);
  box-shadow: none;
}
html[data-theme="dark"] .page-home .cost__card:hover,
html[data-theme="dark"] .page-home #trade-finance .card:hover { background: #293647; }
html[data-theme="dark"] .page-home .cost__figure,
html[data-theme="dark"] .page-home .cost__head,
html[data-theme="dark"] .page-home .faq-section,
html[data-theme="dark"] .page-home .cost__cite a { color: var(--theme-text); }
html[data-theme="dark"] .page-home .cost__rank,
html[data-theme="dark"] .page-home .cost .eyebrow,
html[data-theme="dark"] .page-home .workspace-section__intro h2 span,
html[data-theme="dark"] .page-home .faq-section .eyebrow,
html[data-theme="dark"] .page-home .faq-section .link-arrow,
html[data-theme="dark"] .page-home .faq-section .faq__item[open] summary,
html[data-theme="dark"] .page-home .faq-section .faq__item summary:hover { color: var(--theme-accent); }
html[data-theme="dark"] .page-home .cost__cite,
html[data-theme="dark"] .page-home .cost__proof,
html[data-theme="dark"] .page-home .faq-section .prose,
html[data-theme="dark"] .page-home .faq-section .faq__answer,
html[data-theme="dark"] .page-home .footer__col a { color: var(--truo-slate); }
html[data-theme="dark"] .page-home .cost__card::after { color: rgb(255 255 255 / 5%); }
html[data-theme="dark"] .page-home #trade-finance .card::after { border-color: rgb(255 255 255 / 5%); }
html[data-theme="dark"] .page-home #trade-finance .card__list svg { color: #55c5b1; }
html[data-theme="dark"] .page-home .footer__col a:hover { color: var(--theme-accent); }

/* The demo mockup is a product example, so only its frame and page chrome switch. */
html[data-theme="dark"] .page-demo-new { background: var(--revc-canvas); }
html[data-theme="dark"] .preview-page-header__actions > a { color: var(--theme-accent); }
html[data-theme="dark"] .preview-page-header .theme-toggle { color: var(--theme-text); background: var(--theme-surface-raised); border-color: var(--truo-line); }
html[data-theme="dark"] .workspace-preview { color-scheme: light; color: #161619; }
html[data-theme="dark"] .workspace-preview__footnote { color: var(--theme-text); }

@media (max-width: 760px) {
  .page-home .header__actions { gap: 6px; }
  .preview-page-header__actions { gap: 10px; }
}
@media (max-width: 480px) {
  .preview-page-header__actions > a { font-size: 0; gap: 0; }
  .preview-page-header__actions > a svg { width: 20px; height: 20px; }
}