/*
 * theme-public-dark.css — dark mode for the public marketing site.
 *
 * The public CSS (portfolio.css, content-pages.css, per-page <style> blocks) uses
 * hardcoded light colors, so dark mode is delivered as a scoped override layer
 * under :root[data-theme="dark"]. The attribute selector adds specificity, which
 * lets these rules win over both the base stylesheets and the in-page <style>
 * rules without !important. Loaded LAST on public pages.
 *
 * Theme is applied by the early inline snippet in shared/base.html (no flash) and
 * toggled by theme-public.js; the choice is shared with the dashboards through
 * localStorage['primaforja_theme_preference'].
 */
:root[data-theme="dark"] {
  --pg-bg:        #0f1621;
  --pg-surface:   #172231;
  --pg-surface-2: #1e2b3d;
  --pg-text:      #e6edf5;
  --pg-text-dim:  #9fb0c4;
  --pg-border:    #2a3a4f;
  --pg-accent:    #FFB347;

  /* Site chrome (nav/footer) already reads these vars. */
  --chrome-gradient-from: #0f1621;
  --chrome-gradient-to:   #111827;
  --chrome-text:          #e6edf5;
  --chrome-menu-hover:    #FFB347;
}

/* ── Global canvas ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .page-wrap,
:root[data-theme="dark"] .main-content {
  background: var(--pg-bg) !important;
  color: var(--pg-text);
}

/* ── Homepage + generic light sections → dark surface ─────────────────────── */
:root[data-theme="dark"] .section,
:root[data-theme="dark"] .section-2,
:root[data-theme="dark"] .section-3,
:root[data-theme="dark"] .section-4,
:root[data-theme="dark"] .section-5,
:root[data-theme="dark"] .section-gallery,
:root[data-theme="dark"] .home-hero,
:root[data-theme="dark"] .scale-band {
  background-color: var(--pg-bg) !important;
  color: var(--pg-text);
}

/* Cards / elevated panels */
:root[data-theme="dark"] .cp-card,
:root[data-theme="dark"] .scale-card,
:root[data-theme="dark"] .cp-stat,
:root[data-theme="dark"] .pr-card,
:root[data-theme="dark"] .mm-base,
:root[data-theme="dark"] .pr-driver,
:root[data-theme="dark"] .mm-note-box,
:root[data-theme="dark"] .cp-cta {
  background: var(--pg-surface) !important;
  border-color: var(--pg-border) !important;
  color: var(--pg-text);
}
:root[data-theme="dark"] .cp-stat {
  background: linear-gradient(160deg, var(--pg-surface), var(--pg-surface-2)) !important;
}
/* Gradient bands use the `background` shorthand, so override the shorthand. */
:root[data-theme="dark"] .scale-band {
  background: linear-gradient(160deg, var(--pg-surface), var(--pg-bg)) !important;
}
:root[data-theme="dark"] .rcard,
:root[data-theme="dark"] .scale-card {
  background: var(--pg-surface) !important;
  border-color: var(--pg-border) !important;
  color: var(--pg-text) !important;
}
:root[data-theme="dark"] .scale-band .eyebrow { color: var(--pg-accent) !important; }
:root[data-theme="dark"] .pr-card.feature {
  border-color: var(--pg-accent) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* ── Text: headings, leads, body ──────────────────────────────────────────── */
:root[data-theme="dark"] .cp,
:root[data-theme="dark"] .cp-section > p,
:root[data-theme="dark"] .cp-lead,
:root[data-theme="dark"] .cp-article li,
:root[data-theme="dark"] .cp-article strong,
:root[data-theme="dark"] .cp li,
:root[data-theme="dark"] .paragraph,
:root[data-theme="dark"] .paragraph-small,
:root[data-theme="dark"] p {
  color: var(--pg-text) !important;
}
:root[data-theme="dark"] .cp-article blockquote {
  color: var(--pg-text-dim) !important;
  border-left-color: var(--pg-accent) !important;
  background: var(--pg-surface) !important;
}
:root[data-theme="dark"] .cp h1,
:root[data-theme="dark"] .cp h2,
:root[data-theme="dark"] .cp h3,
:root[data-theme="dark"] .cp h4,
:root[data-theme="dark"] .cp-hero h1,
:root[data-theme="dark"] .cp-section > h2,
:root[data-theme="dark"] .heading,
:root[data-theme="dark"] .heading-section,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 {
  color: #f4f8ff !important;
}
:root[data-theme="dark"] .cp-eyebrow,
:root[data-theme="dark"] .text-color-secondary,
:root[data-theme="dark"] .mm-src,
:root[data-theme="dark"] .mm-note,
:root[data-theme="dark"] .pr-card .who,
:root[data-theme="dark"] .cp-stat .label,
:root[data-theme="dark"] .mm-meta {
  color: var(--pg-text-dim) !important;
}
:root[data-theme="dark"] .cp-eyebrow,
:root[data-theme="dark"] .cp-stat .num,
:root[data-theme="dark"] .pr-card .price,
:root[data-theme="dark"] .pr-driver b,
:root[data-theme="dark"] .mm-base h3 {
  color: var(--pg-accent) !important;
}
:root[data-theme="dark"] .cp-accent { background: var(--pg-accent) !important; }

/* ── Tables (methodology, pricing) ────────────────────────────────────────── */
:root[data-theme="dark"] table.mm-table { background: var(--pg-surface); }
:root[data-theme="dark"] table.mm-table th { background: #111827 !important; color: #fff !important; }
:root[data-theme="dark"] table.mm-table td {
  border-bottom-color: var(--pg-border) !important;
  color: var(--pg-text) !important;
}
:root[data-theme="dark"] table.mm-table tbody tr:nth-child(even) td { background: var(--pg-surface-2) !important; }
:root[data-theme="dark"] td.mm-f { color: #dfe9f5 !important; }
:root[data-theme="dark"] .mm-table-wrap { border-color: var(--pg-border) !important; }
:root[data-theme="dark"] .mm-search {
  background: var(--pg-surface) !important;
  border-color: var(--pg-border) !important;
  color: var(--pg-text) !important;
}
:root[data-theme="dark"] .mm-base code,
:root[data-theme="dark"] code {
  background: #0a1524 !important;
  color: #d7e6f7 !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .cp-btn,
:root[data-theme="dark"] .pr-btn {
  background: var(--pg-surface) !important;
  color: var(--pg-accent) !important;
  border-color: var(--pg-accent) !important;
}
:root[data-theme="dark"] .cp-btn.primary,
:root[data-theme="dark"] .pr-card.feature .pr-btn {
  background: var(--pg-accent) !important;
  color: #06101d !important;
  border-color: var(--pg-accent) !important;
}
:root[data-theme="dark"] .cp-btn:hover,
:root[data-theme="dark"] .pr-btn:hover { background: var(--pg-surface-2) !important; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] footer {
  background: #0a121d !important;
  color: var(--pg-text) !important;
}
:root[data-theme="dark"] .footer-link { color: var(--pg-text-dim) !important; }
:root[data-theme="dark"] .footer-link:hover { color: #fff !important; }

/* ── Floating theme toggle ────────────────────────────────────────────────── */
.theme-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1200;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  color: #C25E00;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.theme-fab:hover { transform: translateY(-2px); }
:root[data-theme="dark"] .theme-fab {
  background: var(--pg-surface-2);
  color: #ffd479;
  border-color: var(--pg-border);
}

/* ── Contact Sales form (portfolio/contact_sales.html) ────────────────────── */
:root[data-theme="dark"] .sf-field label { color: var(--pg-text) !important; }
:root[data-theme="dark"] .sf-field input,
:root[data-theme="dark"] .sf-field select,
:root[data-theme="dark"] .sf-field textarea {
  background: var(--pg-surface) !important;
  border-color: var(--pg-border) !important;
  color: var(--pg-text) !important;
}
:root[data-theme="dark"] .sf-field input::placeholder,
:root[data-theme="dark"] .sf-field textarea::placeholder { color: var(--pg-text-dim) !important; }
:root[data-theme="dark"] .sf-note { color: var(--pg-text-dim) !important; }
:root[data-theme="dark"] .sf-success {
  background: #16321f !important; border-color: #2f5d3d !important; color: #cde7d5 !important;
}
:root[data-theme="dark"] .sf-success h3 { color: #cde7d5 !important; }
:root[data-theme="dark"] .sf-alert {
  background: #3a1c1e !important; border-color: #6d2b30 !important; color: #f3c9cc !important;
}

/* ── Exit-confirmation dialog (dark) ───────────────────────────────────────── */
:root[data-theme="dark"] .fx-box { background: var(--pg-surface); }
:root[data-theme="dark"] .fx-box h3 { color: #f4f8ff; }
:root[data-theme="dark"] .fx-box p { color: var(--pg-text); }

/* ── Page-local navy accents + dark text (sweep 2026-07-29) ────────────────
   Per-page <style> blocks color emphasis text brand-navy (#C25E00) and some
   table/label text near-black; both vanish on dark surfaces. Navy BUTTONS
   with white text are intentionally left alone — they read fine on dark. */
:root[data-theme="dark"] .scale-card b,
:root[data-theme="dark"] .about .eyebrow,
:root[data-theme="dark"] .stat .num,
:root[data-theme="dark"] .soon-eyebrow,
:root[data-theme="dark"] .pr-card .flag,
:root[data-theme="dark"] .cta a.ghost,
:root[data-theme="dark"] .st-awaiting_customer,
:root[data-theme="dark"] .msg .who {
  color: var(--pg-accent) !important;
}
:root[data-theme="dark"] .cta a.ghost { border-color: var(--pg-accent) !important; }

:root[data-theme="dark"] .cmp thead th,
:root[data-theme="dark"] .cmp td:last-child,
:root[data-theme="dark"] td.mm-f,
:root[data-theme="dark"] .dl-callout h4 {
  color: var(--pg-text) !important;
}
:root[data-theme="dark"] .cmp thead th:last-child { color: var(--pg-accent) !important; }

:root[data-theme="dark"] .sup-form label,
:root[data-theme="dark"] .st-lookup label,
:root[data-theme="dark"] .dl-callout p {
  color: var(--pg-text-dim) !important;
}

:root[data-theme="dark"] .mm-base code {
  color: var(--pg-text) !important;
  background: var(--pg-surface-2) !important;
}
:root[data-theme="dark"] .dl-callout {
  background: var(--pg-surface) !important;
  border-color: var(--pg-border) !important;
  border-left-color: var(--pg-accent) !important;
}

/* Blog index cards: the card surface was missed by the dark card group, so
   the globally-lightened text sat on a white card. */
:root[data-theme="dark"] .cp-post-card {
  background: var(--pg-surface) !important;
  border-color: var(--pg-border) !important;
}
:root[data-theme="dark"] .cp-post-card .more { color: var(--pg-accent) !important; }
:root[data-theme="dark"] .cp-post-meta { color: var(--pg-text-dim) !important; }

/* About "How it compares" table: first column stayed near-black, zebra rows
   stayed light (making lightened text invisible on odd rows), borders light. */
:root[data-theme="dark"] .cmp td:first-child { color: var(--pg-text) !important; }
:root[data-theme="dark"] .cmp td { color: var(--pg-text-dim); }
:root[data-theme="dark"] .cmp td:last-child { color: var(--pg-text) !important; }
:root[data-theme="dark"] .cmp tbody tr:nth-child(odd) { background: var(--pg-surface) !important; }
:root[data-theme="dark"] .cmp th,
:root[data-theme="dark"] .cmp td { border-bottom-color: var(--pg-border) !important; }

/* About "See it in action" CTA: light gradient box stayed light while the
   heading was globally lightened — white-on-white. */
:root[data-theme="dark"] .cta { background: var(--pg-surface) !important; }
:root[data-theme="dark"] .cta p { color: var(--pg-text-dim) !important; }

/* FAQ accordions: white boxes + dark summary/category text (audit sweep) */
:root[data-theme="dark"] .cp-faq details {
  background: var(--pg-surface) !important;
  border-color: var(--pg-border) !important;
}
:root[data-theme="dark"] .cp-faq summary { color: var(--pg-text) !important; }
:root[data-theme="dark"] .cp-faq details[open] summary,
:root[data-theme="dark"] .cp-faq summary::after { color: var(--pg-accent) !important; }
:root[data-theme="dark"] .cp-faq .ans { color: var(--pg-text-dim) !important; }
:root[data-theme="dark"] .cp-faq-cat { color: var(--pg-accent) !important; }

/* How-it-works numbered step cards: white cards under lightened text */
:root[data-theme="dark"] .cp-step {
  background: var(--pg-surface) !important;
  border-color: var(--pg-border) !important;
}
:root[data-theme="dark"] .cp-step p { color: var(--pg-text-dim) !important; }

/* Use-cases testimonial quote */
:root[data-theme="dark"] .uc-quote { color: var(--pg-text-dim) !important; }

/* Bare content links (e.g. the pricing mailto) inherit a dark link color */
:root[data-theme="dark"] .cp a:not([class]) { color: var(--pg-accent) !important; }
:root[data-theme="dark"] .backlink { color: var(--pg-accent) !important; }

/* Home dashboard gallery */
:root[data-theme="dark"] #dashboard-gallery .gal-sub { color: var(--pg-text) !important; }
:root[data-theme="dark"] #dashboard-gallery .gal-desc,
:root[data-theme="dark"] .gal-item figcaption,
:root[data-theme="dark"] .gal-hint { color: var(--pg-text-dim) !important; }
:root[data-theme="dark"] .gal-item {
  background: var(--pg-surface) !important;
  border-color: var(--pg-border) !important;
}
:root[data-theme="dark"] .gal-item figcaption {
  background: var(--pg-surface-2) !important;
  border-top-color: var(--pg-border) !important;
}
:root[data-theme="dark"] .gal-step { background: var(--pg-accent) !important; color: #0b1624 !important; }