/**
 * PetroBench site theme tokens + soft dark remaps.
 * See src/components/ui/THEME.md
 */

:root {
  color-scheme: light;
  --pb-bg: #ffffff;
  --pb-fg: #0f172a;
  --pb-muted: #64748b;
  --pb-border: #e2e8f0;
  --pb-card: #ffffff;
  --pb-surface: #f8fafc;
  --pb-accent: #134dc2;
  --pb-accent-hover: #083795;
  --pb-on-accent: #ffffff;
  /* Prevent layout shift when vertical scrollbar appears/disappears */
  scrollbar-gutter: stable;
}

html.dark {
  color-scheme: dark;
  --pb-bg: #000000;
  --pb-fg: #e8edf5;
  --pb-muted: #8b9bb4;
  --pb-border: #1a2233;
  --pb-card: #0a0f1a;
  --pb-surface: #05070d;
  --pb-accent: #3d73df;
  --pb-accent-hover: #5f8eec;
  --pb-on-accent: #ffffff;
}

html.dark body,
html.dark main {
  background-color: var(--pb-bg) !important;
  color: var(--pb-fg);
}

/* HeaderWhite solid bar - unscoped so Astro CID cannot miss it */
#main-header[data-header-solid='1'] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

html.dark #main-header[data-header-solid='1'] {
  background-color: rgb(10, 15, 26) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

/* Soft remaps for common light utilities (not the page canvas) */
html.dark .bg-white:not(body) {
  background-color: var(--pb-card);
}

html.dark .bg-slate-25,
html.dark .bg-slate-50 {
  background-color: var(--pb-surface);
}

html.dark .bg-slate-100 {
  background-color: #141c2e;
}

/* Opacity utility remaps */
html.dark .bg-white\/95 {
  background-color: rgb(10 15 26 / 0.95) !important;
}

html.dark .bg-slate-50\/95 {
  background-color: rgb(5 7 13 / 0.95) !important;
}

/* Gradient sections that stay cream/white in light mode */
html.dark .bg-gradient-to-br.from-slate-50.to-white,
html.dark .from-slate-50.to-white {
  background-image: linear-gradient(to bottom right, var(--pb-surface), var(--pb-card)) !important;
}

html.dark .bg-gradient-to-br.from-blue-50.to-white,
html.dark .from-blue-50.to-white {
  background-image: linear-gradient(
    to bottom right,
    rgba(19, 77, 194, 0.16),
    var(--pb-card)
  ) !important;
}

html.dark .bg-gradient-to-br.from-blue-25.to-white,
html.dark .from-blue-25.to-white {
  background-image: linear-gradient(
    to bottom right,
    rgba(19, 77, 194, 0.12),
    var(--pb-card)
  ) !important;
}

html.dark .hover\:bg-white:hover {
  background-color: var(--pb-card) !important;
}

/* Language menu: dark shell remaps bg-white, but hover:bg-slate-50 stays light -
   that flashes a white row over light text. Keep hover on the dark surface. */
html.dark .lang-dropdown a:hover,
html.dark .lang-dropdown a:focus-visible {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

html.dark .lang-dropdown a:hover .text-slate-800,
html.dark .lang-dropdown a:hover .text-slate-400,
html.dark .lang-dropdown a:focus-visible .text-slate-800,
html.dark .lang-dropdown a:focus-visible .text-slate-400 {
  color: inherit !important;
}

html.dark .lang-dropdown .bg-blue-50 {
  background-color: rgba(19, 77, 194, 0.28) !important;
}

html.dark .pricing-card:hover {
  background-color: var(--pb-surface) !important;
}

html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f1f5f9;
}

html.dark .text-slate-700 {
  color: #e2e8f0;
}

html.dark .text-slate-600,
html.dark .text-slate-500 {
  color: #94a3b8;
}

html.dark .border-slate-100,
html.dark .border-slate-200 {
  border-color: var(--pb-border);
}

html.dark .border-slate-300 {
  border-color: #334155;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--pb-border);
}

html.dark .corporate-card {
  background-color: var(--pb-card);
  border-color: var(--pb-border);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.35);
}

html.dark .text-blue-700 {
  color: #93c5fd;
}

html.dark .text-blue-600 {
  color: #60a5fa;
}

html.dark .bg-blue-50,
html.dark .bg-blue-25 {
  background-color: rgba(19, 77, 194, 0.18);
}

html.dark .bg-blue-100 {
  background-color: rgba(19, 77, 194, 0.28);
}

html.dark .border-blue-100 {
  border-color: rgba(191, 211, 252, 0.25);
}

/* Escape hatch: product screenshots / light mockups stay light */
.pb-keep-light,
[data-keep-light] {
  color-scheme: light;
  --pb-bg: #ffffff;
  --pb-fg: #0f172a;
  --pb-muted: #64748b;
  --pb-border: #e2e8f0;
  --pb-card: #ffffff;
  --pb-surface: #f8fafc;
}

html.dark .pb-keep-light,
html.dark [data-keep-light] {
  background-color: #fff;
  color: #0f172a;
}

html.dark .pb-keep-light .bg-white,
html.dark [data-keep-light] .bg-white {
  background-color: #fff !important;
}

html.dark .pb-keep-light .bg-slate-50,
html.dark .pb-keep-light .bg-slate-25,
html.dark [data-keep-light] .bg-slate-50,
html.dark [data-keep-light] .bg-slate-25 {
  background-color: #f8fafc !important;
}

html.dark .pb-keep-light .text-slate-900,
html.dark .pb-keep-light .text-slate-800,
html.dark [data-keep-light] .text-slate-900,
html.dark [data-keep-light] .text-slate-800 {
  color: #0f172a !important;
}

html.dark .pb-keep-light .text-slate-700,
html.dark [data-keep-light] .text-slate-700 {
  color: #334155 !important;
}

html.dark .pb-keep-light .text-slate-600,
html.dark .pb-keep-light .text-slate-500,
html.dark [data-keep-light] .text-slate-600,
html.dark [data-keep-light] .text-slate-500 {
  color: #64748b !important;
}

html.dark .pb-keep-light .border-slate-100,
html.dark .pb-keep-light .border-slate-200,
html.dark [data-keep-light] .border-slate-100,
html.dark [data-keep-light] .border-slate-200 {
  border-color: #e2e8f0 !important;
}

html.dark .pb-keep-light .text-blue-700,
html.dark [data-keep-light] .text-blue-700 {
  color: #083795 !important;
}

html.dark .pb-keep-light .text-blue-600,
html.dark [data-keep-light] .text-blue-600 {
  color: #134dc2 !important;
}

html.dark .pb-keep-light .bg-blue-50,
html.dark .pb-keep-light .bg-blue-25,
html.dark [data-keep-light] .bg-blue-50,
html.dark [data-keep-light] .bg-blue-25 {
  background-color: #f5f8ff !important;
}

html.dark .pb-keep-light .bg-blue-100,
html.dark [data-keep-light] .bg-blue-100 {
  background-color: #bfd3fc !important;
}

/* Solutions chrome */
html.dark .solutions-role-nav {
  background: rgb(0 0 0 / 0.94);
  border-bottom-color: var(--pb-border);
}

html.dark .solutions-proof {
  background-color: var(--pb-bg);
  border-bottom-color: var(--pb-border);
}

/* SectionEyebrow - light variant on dark pages (AD-inspired) */
html.dark .section-eyebrow--light {
  border-color: rgba(61, 115, 223, 0.35);
  background: rgba(19, 77, 194, 0.16);
}

html.dark .section-eyebrow--light .section-eyebrow-tag {
  background: #3d73df;
  color: #fff;
}

html.dark .section-eyebrow--light .section-eyebrow-label {
  color: #bfdbfe;
}

/* Badges */
html.dark .pb-badge--default {
  background: linear-gradient(to bottom right, #1e293b, #0f172a);
  color: #cbd5e1;
  border-color: #334155;
}

html.dark .pb-badge--light {
  background: #1e293b;
  color: #e2e8f0;
}

html.dark .pb-badge--blue {
  background: rgba(19, 77, 194, 0.28);
  color: #93c5fd;
  border-color: transparent;
}

html.dark .pb-badge--green {
  background: rgba(22, 163, 74, 0.2);
  color: #86efac;
}

html.dark .pb-badge--red {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

/* Hero badge in AgenticHeroShell */
html.dark .hero-badge {
  background: rgba(19, 77, 194, 0.16);
  border-color: rgba(61, 115, 223, 0.35);
}

html.dark .hero-badge-text {
  color: #bfdbfe;
}

html.dark .hero-title {
  color: #f8fafc;
}

html.dark .hero-desc {
  color: #94a3b8;
}

html.dark .hero-cta-secondary {
  background: transparent;
  color: #f8fafc;
  border-color: #334155;
}

html.dark .hero-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #475569;
}

/* Badge.astro default variant under user dark mode */
html.dark .pb-badge--default {
  background: rgba(19, 77, 194, 0.28);
  color: #93c5fd;
  border-color: rgba(61, 115, 223, 0.35);
}

/* ── Footer: light SSR variant under user dark mode ── */
html.dark footer[data-footer-theme='light'] {
  background-color: var(--pb-bg) !important;
  border-top-color: var(--pb-border) !important;
}

html.dark footer[data-footer-theme='light'] .footer-logo-light {
  display: none !important;
}

html.dark footer[data-footer-theme='light'] .footer-logo-dark {
  display: block !important;
}

footer[data-footer-theme='light'] .footer-logo-dark {
  display: none;
}

html.dark footer[data-footer-theme='light'] .border-b,
html.dark footer[data-footer-theme='light'] .footer-link-group {
  border-color: var(--pb-border) !important;
}

html.dark footer[data-footer-theme='light'] .body-small.text-slate-600 {
  color: var(--pb-muted) !important;
}

/* ── Developer surface nav (/agents, /api, /mcp, /developers) ── */
html.dark .dev-surfaces-nav {
  background-color: var(--pb-surface) !important;
  border-bottom-color: var(--pb-border) !important;
}

html.dark .surface-chip {
  color: #94a3b8 !important;
}

html.dark .surface-chip:hover {
  color: #93c5fd !important;
}

html.dark .surface-chip.active {
  color: #bfdbfe !important;
  border-bottom-color: #3d73df !important;
}

/* ── Solutions role nav chips ── */
html.dark .role-chip-label {
  color: #94a3b8 !important;
}

html.dark .role-chip-sub {
  color: #64748b !important;
}

html.dark .role-chip:hover .role-chip-label,
html.dark .role-chip.active .role-chip-sub {
  color: #93c5fd !important;
}

html.dark .role-chip.active .role-chip-label {
  color: #bfdbfe !important;
}

html.dark .role-chip.active {
  border-bottom-color: #3d73df !important;
  background: linear-gradient(180deg, rgba(19, 77, 194, 0.14) 0%, transparent 100%) !important;
}

html.dark .role-chip:hover .role-chip-sub {
  color: #94a3b8 !important;
}

/* ── Solutions operations list copy ── */
html.dark .ls-item,
html.dark .lhq-item,
html.dark .lac-item,
html.dark .lf-item {
  color: #cbd5e1 !important;
}

html.dark .al-highlight {
  color: #94a3b8 !important;
}

/* ── Solutions engineers workflow ── */
html.dark .eng-workflow {
  background-color: var(--pb-bg) !important;
  border-top-color: var(--pb-border) !important;
}

html.dark .workflow-title,
html.dark .stage-title {
  color: #f1f5f9 !important;
}

html.dark .workflow-desc,
html.dark .stage-text {
  color: #94a3b8 !important;
}

html.dark .workflow-body {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
}

html.dark .step-track {
  background-color: var(--pb-surface) !important;
  border-bottom-color: var(--pb-border) !important;
}

html.dark .step-item {
  border-right-color: var(--pb-border) !important;
}

html.dark .step-trigger:hover {
  background: rgba(61, 115, 223, 0.1) !important;
}

html.dark .step-trigger[aria-pressed='true'] {
  background-color: var(--pb-card) !important;
  border-bottom-color: #3d73df !important;
}

html.dark .step-trigger[aria-pressed='true'] .step-num {
  color: #93c5fd !important;
}

html.dark .step-trigger[aria-pressed='true'] .step-label {
  color: #bfdbfe !important;
}

html.dark .step-label {
  color: #94a3b8 !important;
}

/* ── Solutions engineers workspace / orbit ── */
html.dark .eng-workspace,
html.dark .eng-collaborate,
html.dark .eng-rodsim-band,
html.dark .eng-vector-pull {
  background-color: var(--pb-bg) !important;
  border-color: var(--pb-border) !important;
}

html.dark .workspace-title,
html.dark .collab-title,
html.dark .band-title,
html.dark .vector-title,
html.dark .feature-title {
  color: #f1f5f9 !important;
}

html.dark .workspace-desc,
html.dark .collab-desc,
html.dark .band-desc,
html.dark .vector-desc,
html.dark .feature-text,
html.dark .orbit-role,
html.dark .well-meta {
  color: #94a3b8 !important;
}

html.dark .workspace-stage,
html.dark .well-hub,
html.dark .collab-visual,
html.dark .band-grid,
html.dark .vector-demo {
  background-color: transparent !important;
}

html.dark .well-card,
html.dark .proof-frame,
html.dark .visual-main {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
}

html.dark .orbit-chip {
  background-color: var(--pb-surface) !important;
  border-color: var(--pb-border) !important;
  color: #e2e8f0 !important;
}

html.dark .orbit-chip:hover {
  border-color: rgba(61, 115, 223, 0.45) !important;
  background-color: rgba(19, 77, 194, 0.12) !important;
}

html.dark .orbit-name,
html.dark .well-name {
  color: #f1f5f9 !important;
}

html.dark .cap-item,
html.dark .feature-item,
html.dark .guardrail-item {
  color: #cbd5e1 !important;
}

html.dark .cap-text {
  color: #cbd5e1 !important;
}

/* ── Solutions IT panels ── */
html.dark .al-log-frame,
html.dark .ss-panel,
html.dark .rb-matrix-frame,
html.dark .rb-org-frame,
html.dark .db-connectors-frame {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35) !important;
}

html.dark .al-log-chrome,
html.dark .ss-panel-head,
html.dark .rb-matrix-head,
html.dark .rb-org-head,
html.dark .db-connectors-head {
  background-color: var(--pb-surface) !important;
  border-bottom-color: var(--pb-border) !important;
}

html.dark .al-log-row,
html.dark .ss-scim-row,
html.dark .rb-org-row {
  border-bottom-color: var(--pb-border) !important;
}

html.dark .al-log-row:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark .al-log-action,
html.dark .ss-scim-label,
html.dark .rb-org-level {
  color: #f1f5f9 !important;
}

html.dark .al-log-actor,
html.dark .ss-scim-index,
html.dark .rb-org-index {
  color: #93c5fd !important;
}

html.dark .al-log-detail,
html.dark .ss-scim-detail,
html.dark .rb-org-scope,
html.dark .al-log-tag {
  color: #94a3b8 !important;
}

html.dark .al-log-tag {
  background-color: var(--pb-surface) !important;
}

html.dark .rb-corner,
html.dark .rb-perm-head {
  background-color: var(--pb-surface) !important;
  border-color: var(--pb-border) !important;
  color: #94a3b8 !important;
}

html.dark .rb-matrix-row {
  border-bottom-color: var(--pb-border) !important;
}

html.dark .rb-role-cell,
html.dark .rb-product-cell {
  color: #e2e8f0 !important;
}

html.dark .rb-role-cell {
  background-color: rgba(19, 77, 194, 0.16) !important;
  border-color: var(--pb-border) !important;
  color: #93c5fd !important;
}

html.dark .rb-perm-icon {
  background-color: var(--pb-surface) !important;
  color: #64748b !important;
}

html.dark .rb-perm-yes {
  background-color: rgba(19, 77, 194, 0.2) !important;
  color: #93c5fd !important;
}

/* ── Home agent-callable breakdown (acb-*) ── */
html.dark .acb-panel {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35) !important;
}

html.dark .acb-tabs {
  background-color: var(--pb-surface) !important;
  border-bottom-color: var(--pb-border) !important;
}

html.dark .acb-tab {
  border-right-color: var(--pb-border) !important;
}

html.dark .acb-tab:hover {
  background-color: rgba(19, 77, 194, 0.1) !important;
}

html.dark .acb-tab.is-active {
  background-color: var(--pb-card) !important;
  box-shadow: inset 0 -2px 0 #3d73df !important;
}

html.dark .acb-tab-label {
  color: #e2e8f0 !important;
}

html.dark .acb-tab.is-active .acb-tab-label {
  color: #bfdbfe !important;
}

html.dark .acb-tab-path {
  color: #64748b !important;
}

html.dark .acb-context {
  background: var(--pb-surface) !important;
  border-right-color: var(--pb-border) !important;
}

html.dark .acb-context-kicker {
  color: #93c5fd !important;
}

html.dark .acb-context-copy,
html.dark .acb-row-hint {
  color: #94a3b8 !important;
}

html.dark .acb-context-endpoint {
  background-color: var(--pb-bg) !important;
  border-color: var(--pb-border) !important;
  color: #cbd5e1 !important;
}

html.dark .acb-context-link {
  color: #93c5fd !important;
}

html.dark .acb-context-link:hover {
  color: #bfdbfe !important;
}

html.dark .acb-hitl-callout {
  background: rgba(19, 77, 194, 0.14) !important;
  border-color: rgba(61, 115, 223, 0.35) !important;
  color: #cbd5e1 !important;
}

html.dark .acb-matrix-head {
  border-bottom-color: var(--pb-border) !important;
  color: #64748b !important;
}

html.dark .acb-col-label {
  color: #64748b !important;
}

html.dark .acb-section[data-active-surface='rest'] .acb-col-label[data-acb-col='rest'],
html.dark .acb-section[data-active-surface='mcp'] .acb-col-label[data-acb-col='mcp'],
html.dark .acb-section[data-active-surface='vector'] .acb-col-label[data-acb-col='vector'] {
  color: #93c5fd !important;
}

html.dark .acb-row {
  border-bottom-color: var(--pb-border) !important;
}

html.dark .acb-row:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark .acb-row-label {
  color: #f1f5f9 !important;
}

html.dark .acb-cell {
  background-color: var(--pb-surface) !important;
  border-color: var(--pb-border) !important;
  color: #64748b !important;
}

html.dark .acb-cell.is-muted,
html.dark .acb-cell-dash {
  color: #64748b !important;
}

html.dark .acb-section[data-active-surface='rest'] .acb-cell[data-acb-cell='rest']:not(.is-muted),
html.dark .acb-section[data-active-surface='mcp'] .acb-cell[data-acb-cell='mcp']:not(.is-muted),
html.dark
  .acb-section[data-active-surface='vector']
  .acb-cell[data-acb-cell='vector']:not(.is-muted) {
  color: #93c5fd !important;
  background-color: rgba(19, 77, 194, 0.2) !important;
  border-color: rgba(61, 115, 223, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(19, 77, 194, 0.12) !important;
}

html.dark .acb-footer {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
  box-shadow: none !important;
}

html.dark .acb-trust-item {
  color: #94a3b8 !important;
}

html.dark .acb-trust-sep {
  background-color: var(--pb-border) !important;
}

/* ── Agents: AgentSecurity cards ── */
html.dark .as-card {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35) !important;
}

html.dark .as-card:hover {
  box-shadow: 0 12px 28px -18px rgb(0 0 0 / 0.55) !important;
}

html.dark .as-title {
  color: #f1f5f9 !important;
}

html.dark .as-desc {
  color: #94a3b8 !important;
}

/* ── Agents: WhyNotGeneric comparison board ── */
html.dark .wng {
  background:
    radial-gradient(1200px 480px at 85% -10%, rgba(19, 77, 194, 0.18), transparent 55%),
    linear-gradient(180deg, var(--pb-bg) 0%, var(--pb-surface) 42%, var(--pb-bg) 100%) !important;
}

html.dark .wng-board {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35) !important;
}

html.dark .wng-head--generic,
html.dark .wng-cell--generic {
  background-color: var(--pb-surface) !important;
  border-color: var(--pb-border) !important;
}

html.dark .wng-head--vector,
html.dark .wng-cell--vector {
  background: linear-gradient(
    135deg,
    rgba(19, 77, 194, 0.16) 0%,
    rgba(19, 77, 194, 0.08) 100%
  ) !important;
  border-color: rgba(61, 115, 223, 0.25) !important;
}

html.dark .wng-row {
  border-top-color: var(--pb-border) !important;
}

html.dark .wng-row:hover .wng-cell--vector {
  background: linear-gradient(
    180deg,
    rgba(19, 77, 194, 0.18) 0%,
    rgba(19, 77, 194, 0.1) 100%
  ) !important;
}

html.dark .wng-title,
html.dark .wng-row-title {
  color: #f1f5f9 !important;
}

html.dark .wng-kicker {
  color: #64748b !important;
}

html.dark .wng-kicker--accent {
  color: #93c5fd !important;
}

html.dark .wng-badge {
  color: #bfdbfe !important;
  background: rgba(19, 77, 194, 0.22) !important;
  border-color: rgba(61, 115, 223, 0.35) !important;
}

html.dark .wng-row-label {
  color: #64748b !important;
}

html.dark .wng-row-label--accent {
  color: #93c5fd !important;
}

html.dark .wng-copy {
  color: #94a3b8 !important;
}

html.dark .wng-copy--strong {
  color: #e2e8f0 !important;
}

/* ── Pricing billing toggle ── */
html.dark .billing-tab {
  color: #94a3b8 !important;
}

html.dark .billing-tab:hover {
  color: #e2e8f0 !important;
}

html.dark .billing-tab.active {
  color: #bfdbfe !important;
  background-color: var(--pb-card) !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35) !important;
}

/* Component-scoped hardcoded light backgrounds */
html.dark .rodsim-intro-frame,
html.dark .demo-video-frame {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
}

html.dark .vp-play-control {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
}

html.dark .acb-btn-secondary {
  background-color: transparent !important;
  color: #93c5fd !important;
  border-color: rgba(61, 115, 223, 0.35) !important;
}

html.dark .acb-btn-secondary:hover {
  background-color: rgba(19, 77, 194, 0.14) !important;
  border-color: rgba(61, 115, 223, 0.45) !important;
}

html.dark .legacy-file-formats,
html.dark .legacy-file-cell,
html.dark .data-int-frame {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
}

html.dark .legacy-file-grid {
  background-color: var(--pb-border) !important;
}

html.dark .comparison-header,
html.dark .competitive-header {
  background-color: rgb(5 7 13 / 0.95) !important;
  border-color: var(--pb-border) !important;
}

/* Gap-grid + column hairlines (CompactChallenges, integration logos, SSO cells) */
html.dark .bg-slate-200,
html.dark .bg-slate-300 {
  background-color: var(--pb-border) !important;
}

/* Data integration logo grid cells inherit card via parent */
html.dark .data-int-frame .bg-white {
  background-color: var(--pb-card) !important;
}

/* Solutions IT - data boundary + connectors */
html.dark .db-boundary-frame {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
}

html.dark .db-boundary-head,
html.dark .db-boundary-ring,
html.dark .db-connectors-foot {
  background-color: var(--pb-surface) !important;
  border-color: var(--pb-border) !important;
}

html.dark .db-boundary-core {
  background: linear-gradient(180deg, rgba(19, 77, 194, 0.14) 0%, var(--pb-card) 100%) !important;
  border-color: rgba(61, 115, 223, 0.35) !important;
}

html.dark .db-boundary-tag {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
  color: var(--pb-muted) !important;
}

html.dark .db-boundary-tag-accent {
  background-color: rgba(19, 77, 194, 0.2) !important;
  border-color: rgba(61, 115, 223, 0.35) !important;
  color: #93c5fd !important;
}

html.dark .db-logo-grid {
  background-color: var(--pb-border) !important;
}

html.dark .db-logo-cell {
  background-color: var(--pb-card) !important;
}

html.dark .al-log-footer {
  background-color: var(--pb-surface) !important;
  border-color: var(--pb-border) !important;
  color: var(--pb-muted) !important;
}

/* Solutions IT - SSO / SCIM protocol grid */
html.dark .ss-protocol-row,
html.dark .ss-idp-grid {
  background-color: var(--pb-border) !important;
  border-color: var(--pb-border) !important;
}

html.dark .ss-protocol-cell,
html.dark .ss-idp-cell {
  background-color: var(--pb-card) !important;
}

html.dark .ss-protocol-label,
html.dark .ss-idp-label {
  color: #f1f5f9 !important;
}

/* Solutions engineers - collaborate inset + vector CTA */
html.dark .visual-inset {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
}

html.dark .visual-inset-label {
  background-color: var(--pb-surface) !important;
  border-color: var(--pb-border) !important;
  color: var(--pb-muted) !important;
}

html.dark .vector-cta {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
  color: #f1f5f9 !important;
}

html.dark .vector-cta:hover {
  background-color: var(--pb-surface) !important;
  border-color: rgba(61, 115, 223, 0.45) !important;
  color: #bfdbfe !important;
}

html.dark .demo-frame {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
}

/* ── Section eyebrow dark variant on user-dark pages ── */
html.dark .section-eyebrow--dark {
  border-color: rgba(61, 115, 223, 0.35);
  background: rgba(19, 77, 194, 0.12);
}

html.dark .section-eyebrow--dark .section-eyebrow-label {
  color: #bfdbfe;
}

/* ── Agentic CTA outline (home gradient section) ── */
html.dark .pb-agent-btn-outline {
  color: #e2e8f0 !important;
  border-color: #334155 !important;
  background: transparent !important;
}

html.dark .pb-agent-btn-outline:hover {
  color: #f8fafc !important;
  border-color: #475569 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ── Agents audience triad cards ── */
html.dark [data-built-for-triad] {
  background-color: var(--pb-bg) !important;
}

html.dark .triad-card {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35) !important;
}

html.dark .triad-card:hover {
  box-shadow: 0 12px 28px -18px rgb(0 0 0 / 0.45) !important;
}

/* ── Solutions band/vector product names on dark sections ── */
html.dark .band-product-name,
html.dark .vector-name {
  color: #93c5fd !important;
}

/* ── Panel kickers on dark surfaces ── */
html.dark .ss-panel-kicker,
html.dark .rb-matrix-kicker,
html.dark .rb-org-kicker,
html.dark .db-connectors-kicker,
html.dark .al-log-label {
  color: #93c5fd !important;
}

/* Dividers + secondary buttons
   Tailwind bakes the via-* color into --tw-gradient-stops; remap stops, not a fake --tw-gradient-via. */
html.dark .gradient-divider {
  background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.22), transparent);
}

html.dark .via-slate-200,
html.dark .via-slate-300 {
  --tw-gradient-stops:
    var(--tw-gradient-from), rgba(148, 163, 184, 0.22) var(--tw-gradient-via-position),
    var(--tw-gradient-to) !important;
}

html.dark .btn-secondary {
  color: #cbd5e1;
  border-color: #334155;
}

html.dark .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  border-color: #475569;
}

/* FinalCTA bar band - lift from page shell */
html.dark .bg-slate-900 {
  background-color: var(--pb-surface);
  border-top: 1px solid var(--pb-border);
}

/* FAQ accordion */
html.dark .faq-trigger[aria-expanded='true'] .faq-question {
  color: #f1f5f9;
}

html.dark .faq-trigger[aria-expanded='true'] .faq-icon svg {
  color: #94a3b8;
}

html.dark .faq-trigger:hover .faq-question {
  opacity: 0.85;
}

html.dark .faq-answer .prose strong {
  color: #e2e8f0;
}

html.dark .faq-answer .prose a {
  color: #60a5fa;
}

html.dark .faq-answer .prose a:hover {
  color: #93c5fd;
}

/* SolutionsRoleNav chips */
html.dark .role-chip-label {
  color: #94a3b8;
}

html.dark .role-chip-sub {
  color: #64748b;
}

html.dark .role-chip:hover .role-chip-label {
  color: #93c5fd;
}

html.dark .role-chip:hover .role-chip-sub {
  color: #94a3b8;
}

html.dark .role-chip.active .role-chip-label {
  color: #bfdbfe;
}

html.dark .role-chip.active .role-chip-sub {
  color: #93c5fd;
}

html.dark .role-chip.active {
  border-bottom-color: #3d73df;
  background: linear-gradient(180deg, rgba(19, 77, 194, 0.14) 0%, rgba(2, 6, 23, 0) 100%);
}

html.dark .role-chip:focus-visible {
  outline-color: #3d73df;
}

/* IconBox + legacy icon-box-white */
html.dark .icon-box-white {
  background-color: rgba(19, 77, 194, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(61, 115, 223, 0.28);
}

html.dark .icon-box-white:hover {
  background-color: rgba(19, 77, 194, 0.32);
}

html.dark .bg-blue-50.text-blue-600 {
  border: 1px solid rgba(61, 115, 223, 0.25);
  color: #93c5fd;
}

html.dark .bg-blue-50.text-blue-600:hover,
html.dark .bg-blue-50.text-blue-600.hover\:bg-blue-100:hover {
  background-color: rgba(19, 77, 194, 0.28);
}

html.dark .bg-blue-100.text-blue-600 {
  border: 1px solid rgba(61, 115, 223, 0.3);
  color: #93c5fd;
}

html.dark .bg-slate-100.text-slate-600 {
  background-color: #1e293b;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

html.dark .border-blue-200.text-blue-600 {
  border-color: rgba(61, 115, 223, 0.35);
  color: #93c5fd;
}

html.dark .border-slate-200.text-slate-600.bg-white,
html.dark .border-slate-200.text-slate-600.bg-transparent {
  border-color: rgba(148, 163, 184, 0.22);
  color: #94a3b8;
}

/* AgenticHeroShell - AD-inspired grid/glow, restrained */
html.dark .agentic-hero {
  background-color: var(--pb-bg);
  border-bottom-color: var(--pb-border);
}

html.dark .agentic-hero-glow {
  background: radial-gradient(45% 38% at 12% 8%, rgba(19, 77, 194, 0.1), transparent 72%);
}

html.dark .agentic-hero-grid {
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  opacity: 0.9;
}

html.dark .agentic-hero-line {
  background: linear-gradient(90deg, transparent, rgba(61, 115, 223, 0.16), transparent);
}

/* Footer chrome: language + theme controls */
.footer-chrome-controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

html.dark footer .footer-chrome-controls .lang-switcher-btn {
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.55);
}

html.dark footer .footer-chrome-controls .lang-switcher-btn:hover {
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(30, 41, 59, 0.75);
}

/* Native diagrams (not product screenshots) - adapt to dark shell */
html.dark .ge-visual {
  --ge-navy: #0e2f60; /* HQ node stays brand navy */
  --ge-line: #1a2233;
  --ge-soft: #0a0f1a;
  --ge-wire: #334155;
  --ge-accent: #3d73df;
}

html.dark .ge-sub,
html.dark .ge-assets span,
html.dark .ge-plat {
  background: #05070d !important;
  border-color: #1a2233 !important;
  color: #8b9bb4 !important;
}

html.dark .ge-region-name,
html.dark .ge-plat-head {
  color: #e8edf5 !important;
}

html.dark .ge-assets i,
html.dark .ge-feat i {
  color: #93c5fd !important;
}

html.dark .ge-feat {
  color: #8b9bb4 !important;
}

html.dark .ge-flag {
  border-color: #334155 !important;
}

html.dark .sso-visual {
  background: #0a0f1a !important;
  border-color: #1a2233 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

html.dark .sso-eyebrow {
  color: #60a5fa !important;
}

html.dark .sso-title {
  color: #e8edf5 !important;
}

html.dark .sso-step {
  background: #05070d !important;
  border-color: #1a2233 !important;
}

html.dark .sso-tag {
  color: #8b9bb4 !important;
}

html.dark .sso-name {
  color: #f1f5f9 !important;
}

html.dark .sso-detail {
  color: #8b9bb4 !important;
}

html.dark .sso-arrow {
  border-right-color: #64748b !important;
  border-bottom-color: #64748b !important;
  background: transparent !important;
}
