/* ==========================================================================
   FairTech Sitewide Background — dark navy page canvas on every page,
   matching the hero sections' color family (Steps 3/7). Loaded last so it
   reliably wins the cascade for `body`/footer color rules that predate
   this pass. Deliberately a flatter navy than the hero's full grid +
   particle treatment — that's a hero-specific effect; every other page
   just needs the consistent background color, not the extra decoration,
   especially on long, content-dense pages (category listings, checkout).

   Bootstrap components (cards, modals, dropdowns, tables, form inputs)
   already carry their own white backgrounds, so their dark text stays
   legible without any changes — only the page canvas + a handful of
   classes that render plain text directly on it needed updating here.
   ========================================================================== */

html {
  background: var(--ds-bg-base, #060b16);
}

body {
  background: linear-gradient(180deg, var(--ds-bg-deep, #030712) 0%, var(--ds-bg-base, #060b16) 420px, var(--ds-bg-base, #060b16) 100%);
  color: var(--ds-text-secondary, #aab4c8);
}

/* Headings default to full white rather than the slightly dimmer body text */
h1, h2, h3, h4, h5, h6 {
  color: var(--ds-text-primary, #f3f6fc);
}

a {
  color: var(--ds-accent, #3d8bff);
}

a:hover {
  color: var(--ds-accent-strong, #0066ff);
}

/* Elements that previously assumed a white page and set explicit dark text */
.category-h2,
.index-category,
.category-available {
  color: var(--ds-text-primary, #f3f6fc);
}

.seeall-link {
  color: var(--ds-accent, #3d8bff);
  border-color: rgba(255, 255, 255, 0.18);
}

.product-details-topcat a,
.breadcrumb-item.active {
  color: var(--ds-text-secondary, #aab4c8) !important;
}

.devider {
  background: rgba(255, 255, 255, 0.18);
}

/* ---- Footer: was a plain white section, now matches the rest of the page ---- */

.footer-section {
  background: var(--ds-bg-deep, #030712);
}

.single-cta i,
.cta-text p,
.footer-social-icon span {
  color: var(--ds-text-primary, #f3f6fc);
}

.cta-text span,
.footer-text div {
  color: var(--ds-text-secondary, #aab4c8);
}

.footer-widget ul li a {
  color: var(--ds-text-secondary, #aab4c8);
}

.footer-widget ul li a:hover {
  color: var(--ds-accent, #3d8bff);
}

.subscribe-form input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--ds-text-primary, #f3f6fc);
}

.subscribe-form input::placeholder {
  color: var(--ds-text-muted, #7c869c);
}

.copyright-area {
  background: #020509;
}

.copyright-text p,
.copyright-text a {
  color: var(--ds-text-muted, #7c869c);
}