/* Loaded last on every page so theme colors also override page-specific styles. */
:root[data-theme="dark"] {
  --primary: #a5b4fc;
  --primary-strong: #c4b5fd;
  --primary-glow: rgba(165, 180, 252, 0.3);
  --bg: #080d19;
  --surface: #111827;
  --surface-soft: #17152a;
  --border: #2d3748;
  --text-dark: #f1f5f9;
  --text-muted: #a8b3c5;
  color-scheme: dark;
}

:root[data-theme="dark"] body {
  background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.14), transparent 32rem), linear-gradient(180deg, #0d1322 0%, var(--bg) 24rem);
  color: var(--text-dark);
}

:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .mobile-nav-links { background: rgba(8, 13, 25, 0.94); border-color: var(--border); }

:root[data-theme="dark"] :is(
  .mobile-menu-toggle, .feature-card, .product-card, .learn-resource-card,
  .comparison-card, .pricing-card, .compliance-card, .legal-card,
  .subprocessor-card, .framework-card, .panel, .tool-package-card,
  .sequence-diagram, .doc-chip, .integration-card, .integration-detail,
  .integration-step, .integration-cta, .pricing-section, .plan-card,
  .pricing-faq-item, .pricing-comparison, .pricing-trust-item,
  .gov-note, .api-details, .copy-btn, .pattern-card, .diagram-step,
  .endpoint-card, .checklist li, .field-table-wrap
) {
  background: var(--surface);
  color: var(--text-dark);
  border-color: var(--border);
}
:root[data-theme="dark"] :is(.panel, .api-details, .pattern-card, .endpoint-card, .tool-install-card) pre {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}

:root[data-theme="dark"] :is(.tool-banner, .tech-hero) {
  background: linear-gradient(140deg, rgba(129, 140, 248, 0.14), rgba(17, 24, 39, 0.92));
  border-color: var(--border);
}

:root[data-theme="dark"] :is(
  .integration-logo, .integration-icon, .integration-example,
  .integration-prerequisite, .integration-resource, .code-header,
  .pricing-toggle, .pricing-feature-row, .pricing-faq-list,
  .endpoint-flow, .tech-callout
) { background-color: var(--surface-soft); border-color: var(--border); }

:root[data-theme="dark"] :is(
  .tool-package-card, .sequence-diagram, .doc-chip,
  .integration-card, .integration-detail, .integration-step
) :is(h1, h2, h3, h4, strong) { color: var(--text-dark); }

:root[data-theme="dark"] :is(.btn-secondary, .button-secondary) {
  background-color: transparent;
  color: var(--text-dark);
  border-color: var(--border);
}
:root[data-theme="dark"] :is(.btn-primary, .btn-nav, .button-primary) {
  color: #0b1020 !important;
}

:root[data-theme="dark"] :is(input, textarea, select) {
  background: var(--surface);
  color: var(--text-dark);
  border-color: var(--border);
}

:root[data-theme="dark"] .site-footer { background: #070b14; border-color: var(--border); }
:root[data-theme="dark"] .tech-footer { background: #070b14; border-color: var(--border); }
:root[data-theme="dark"] .tool-install-card { background: linear-gradient(145deg, #111827, #17152a); border-color: var(--border); }
:root[data-theme="dark"] :is(.endpoint-flow, .gov-note) { color: var(--text-muted); }
:root[data-theme="dark"] :is(.field-table code, .api-hint code) { color: #c4b5fd; background: rgba(165,180,252,.12); }
:root[data-theme="dark"] .diagram-step:not(:last-child)::after { background: var(--bg); }

/* Landing page */
:root[data-theme="light"] .closing-panel {
  background: radial-gradient(circle at 85% 20%, rgba(139,130,246,.2), transparent 28rem), var(--surface);
  color: var(--text-dark);
  border: 1px solid var(--border);
  box-shadow: 0 28px 70px rgba(15,23,42,.12);
}
:root[data-theme="light"] .closing-panel p { color: var(--text-muted); }
:root[data-theme="light"] .closing-panel .btn-secondary { color: var(--text-dark); border-color: var(--border); }
:root[data-theme="light"] .closing-panel::after {
  border-color: rgba(93,86,200,.12);
  box-shadow: 0 0 0 4rem rgba(93,86,200,.035), 0 0 0 8rem rgba(93,86,200,.02);
}
:root[data-theme="dark"] :is(
  .homepage-main, .community-proof, .control-stage, .workflow-band,
  .foresight-stage, .developer-stage, .use-case-stage, .closing-stage
) { background: #080d19; color: var(--text-dark); border-color: var(--border); }
:root[data-theme="dark"] .hero-home { background: radial-gradient(circle at 75% 12%, rgba(93,86,200,.22), transparent 32rem), #0d1322; }
:root[data-theme="dark"] :is(
  .control-card:not(.control-card-primary), .workflow-step, .foresight-preview,
  .use-case-row, .responsible-strip
) { background: #111827; color: var(--text-dark); border-color: var(--border); }
:root[data-theme="dark"] :is(.control-card-policy, .policy-row, .preview-advisory, .signal-track) { background-color: #17152a; border-color: #34304d; }
:root[data-theme="dark"] :is(
  .control-heading p, .control-card > p, .workflow-copy p, .workflow-step p,
  .foresight-copy p, .preview-summary, .use-case-row p, .responsible-strip
) { color: var(--text-muted); }
:root[data-theme="dark"] :is(.use-case-row h3, .policy-row, .preview-topline) { color: var(--text-dark); }
:root[data-theme="dark"] .package-row { background: var(--surface); color: var(--text-dark); border-color: var(--border); }

/* Pricing redesign: match the actual *-stage and component class names. */
:root[data-theme="dark"] :is(
  .pricing-main, .growth-stage, .pricing-reassurance-stage,
  .pricing-faq-new, .pricing-closing-stage
) { background: var(--bg); color: var(--text-dark); }
:root[data-theme="dark"] .pricing-hero-new {
  background: radial-gradient(circle at 82% 18%, rgba(129,140,248,.18), transparent 27rem), linear-gradient(180deg, #0d1322, var(--bg));
}
:root[data-theme="dark"] .pricing-details-stage {
  background: radial-gradient(circle at 15% 15%, rgba(129,140,248,.14), transparent 24rem), #0c1220;
}
:root[data-theme="dark"] :is(
  .growth-plan, .pricing-disclosure, .pricing-reassurance-panel,
  .pricing-faq-new .pricing-faq-item, .billing-toggle, .pricing-eyebrow
) { background: var(--surface); color: var(--text-dark); border-color: var(--border); }
:root[data-theme="dark"] :is(
  .growth-plan, .pricing-disclosure, .pricing-reassurance-panel,
  .pricing-faq-new .pricing-faq-item
) :is(h2, h3, strong, summary) { color: var(--text-dark); }
:root[data-theme="dark"] .growth-plan-featured {
  background: radial-gradient(circle at 100% 0%, rgba(129,140,248,.16), transparent 15rem), var(--surface-soft);
}
:root[data-theme="dark"] :is(.growth-price, .growth-plan li strong) { color: var(--text-dark); }
:root[data-theme="dark"] :is(.growth-plan-topline, .growth-price span, .growth-price-detail, .growth-plan li, .pricing-assurance span, .overage-intro p) { color: var(--text-muted); }
:root[data-theme="dark"] .pricing-disclosure .pricing-table-wrap { border-color: var(--border); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; }
}