/* ==========================================================================
   ReviewStand.ca: Dark Premium Theme (Option C)
   Loaded only on pages that opt into the dark direction. Redefines the
   shared page-level tokens from variables.css, then patches the handful
   of components that were hardcoded for a light page (nav, mobile menu,
   hero photo overlay, form fields) so nothing reads as broken.

   Components that stay a fixed light surface on purpose (product photo
   cards, the hero showcase frame, solid white buttons) are NOT touched
   here: they use the theme-stable --color-ink tokens from variables.css,
   which never flip, so their own text stays correct automatically.
   ========================================================================== */

:root {
  --color-bg: #0B0D12;
  --color-surface: #151822;
  --color-surface-alt: #1B1F2B;
  --color-border: #232838;

  --color-secondary: #F3F4F6;
  --color-text: #F3F4F6;
  --color-text-muted: #9AA1AF;
  --color-text-faint: #8890A0;

  --color-gold: #F0B429;
  --color-gold-dark: #D89A1F;

  /* Text/icons sitting directly on the dark page (eyebrows, breadcrumbs,
     links): #2563EB only clears ~3.9:1 there, below AA. Button fills
     keep using --color-primary unchanged, they're judged against their
     own background, not the page, so they're unaffected. */
  --color-link: #7B9CFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.65);
}

/* ---- Header / nav: dark translucent bar ---------------------------------*/
.site-header {
  background: rgba(11, 13, 18, 0.82);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}
.mobile-menu {
  background: var(--color-bg);
}

/* ---- Hero photo: dark wash instead of white wash -------------------------*/
.hero__bg::after {
  background: linear-gradient(
    115deg,
    rgba(11, 13, 18, 0.97) 0%,
    rgba(11, 13, 18, 0.93) 32%,
    rgba(11, 13, 18, 0.8) 58%,
    rgba(11, 13, 18, 0.55) 100%
  );
}
@media (max-width: 1023px) {
  .hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(11, 13, 18, 0.94) 0%,
      rgba(11, 13, 18, 0.9) 45%,
      rgba(11, 13, 18, 0.86) 100%
    );
  }
}

/* ---- Hero showcase: stays a fixed light "display case" frame -------------*/
.showcase__frame {
  background: linear-gradient(155deg, #ffffff 0%, #f4f1ea 100%);
}

/* ---- Benefits band: was a dark box on a light page, now a raised panel ---*/
.benefits {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* ---- FAQ, newsletter input, custom-branding visual: dark surfaces --------*/
.faq-item {
  background: var(--color-surface);
}

.newsletter-form input {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}
.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.custom-band {
  background: var(--color-surface);
}
.custom-band__visual {
  background: linear-gradient(160deg, var(--color-surface-alt), var(--color-surface));
  border-color: var(--color-border);
}

/* ---- Product cards stay a fixed light photo stage; protect their text ----*/
.product-card__body h3 { color: var(--color-ink); }
.product-card__body p { color: var(--color-ink-muted); }

/* ---- Pricing tiers (Custom & Bulk Orders): dark raised cards -------------
   The featured/blue tier already has its own explicit white text and is
   unaffected by theme. Only the two plain white tiers need converting. */
.pricing-card {
  background: var(--color-surface);
}
.pricing-note {
  color: var(--color-text-faint);
}

/* ---- Every select, everywhere: solid dark background ----------------------*/
select {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* ---- Admin tables: dark surfaces ------------------------------------------*/
.admin-table-wrap {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.admin-table th {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.admin-table td, .admin-table th {
  border-color: var(--color-border);
}
.stat-tile {
  background: var(--color-surface);
}
.admin-table__thumb {
  background: var(--color-surface-alt);
}

/* ---- Quote form: dark card, dark inputs ----------------------------------*/
.quote-form-card {
  background: var(--color-surface);
}
.quote-form-progress {
  background: var(--color-surface-alt);
}
.field input,
.field select,
.field textarea {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.upload-drop {
  border-color: var(--color-border);
}
.timeline-option {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.timeline-option[aria-pressed="true"] {
  background: var(--color-surface);
}