/* Homepage colour layer. Layout and component styling stay in apple-site.css. */
:root {
  color-scheme: dark;
  --bg: #101010;
  --text: #f5f5f7;
  --muted: #b1b1b8;
  --line: #36363d;
}

/* Light surfaces keep the original foreground palette. */
.workbench,
.channel-logo,
.api-callout,
.feature,
.automation-callout,
.seller-license-options article,
.brand-section,
.legal-grid,
dialog {
  color-scheme: light;
  --text: #1d1d1f;
  --muted: #626269;
  --line: #dcdce0;
  color: var(--text);
}

.header {
  background: #101010;
  border-bottom-color: var(--line);
}
.brand .brand-wordmark,
.hero-description strong,
.customer-scale strong,
.integration-invite strong,
.manifesto {
  color: var(--text);
}
.header nav a { color: #d5d5dc; }
.header nav a:hover,
.seller-label,
.hero-actions .text-link.action-link,
.integration-invite > .text-link,
.seller-license-actions > .text-link,
.faq-section > div > .text-link,
.faq details p a,
.footer-bottom a:hover {
  color: #83baff;
}
.login,
.menu-toggle {
  background: #1d2633;
  color: #dceaff;
  border-color: #465569;
}
.seller-page .audience,
.hero-description,
.customer-scale,
.integrations-heading > p:last-child,
.integration-invite p,
.channels > .integration-note,
.section-heading > p:last-child,
.steps p,
.implementation-bottom p,
.seller-license-note,
.faq details p,
.footer-bottom {
  color: var(--muted);
}
.steps li,
.implementation-bottom,
.faq details,
.faq details:last-child,
.footer-bottom {
  border-color: var(--line);
}
.faq summary::after { color: #b1b1b8; }

/* The existing marketplace accents remain visible against the black fill. */
.marketplace-blue { background-image: linear-gradient(110deg, #2589ff, #53a6ff); }
.marketplace-magenta { background-image: linear-gradient(105deg, #ff38c4, #c46bff); }
.marketplace-yellow { background-image: linear-gradient(105deg, #ff8a3d, #ffd52b); }
.marketplace-violet { background-image: linear-gradient(110deg, #ad72ff, #ca87ff); }

@supports (backdrop-filter: blur(20px)) {
  .header { background: #101010e6; }
}
@media (max-width: 1150px) {
  .header.nav-ready #site-menu { border-color: var(--line); }
  .header.nav-ready #site-menu a:hover { background: #24242b; }
  .header.nav-ready #site-menu .menu-login { color: #83baff; }
}
@media (prefers-reduced-transparency: reduce) {
  .header { background: #101010; }
}
@media (prefers-contrast: more) {
  :root { --muted: #d5d5dc; --line: #797982; }
  .header { background: #101010; }
}
@media (forced-colors: active) {
  .marketplace-word > span {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}