/* =========================================================
   MERSAD COLOR MODE SYSTEM
   Loaded last so the existing dark theme remains untouched.
   Light mode is an intentional off-white editorial treatment.
   ========================================================= */

:root {
  color-scheme: dark;
  --mersad-mode-bg: #050505;
  --mersad-mode-bg-2: #0d0d0d;
  --mersad-mode-surface: #171717;
  --mersad-mode-surface-2: #242424;
  --mersad-mode-text: #f7f7f5;
  --mersad-mode-muted: #b9b9b9;
  --mersad-mode-soft: #777777;
  --mersad-mode-border: rgba(255,255,255,.09);
  --mersad-mode-lime: #d3f200;
  --mersad-mode-lime-text: #050505;
}

html[data-theme="light"] {
  color-scheme: light;
  --mersad-mode-bg: #f7f7f5;
  --mersad-mode-bg-2: #ffffff;
  --mersad-mode-surface: #ffffff;
  --mersad-mode-surface-2: #eeeeea;
  --mersad-mode-text: #0b0b0b;
  --mersad-mode-muted: #555650;
  --mersad-mode-soft: #70716b;
  --mersad-mode-border: rgba(5,5,5,.12);
  --mersad-mode-lime: #c7e600;
  --mersad-mode-lime-text: #050505;
}

html[data-theme="light"] body {
  background: var(--mersad-mode-bg) !important;
  color: var(--mersad-mode-text) !important;
}

html[data-theme="light"] #main-content,
html[data-theme="light"] :where(
  .mersad-hero,
  .mersad-about,
  .mersad-services,
  .mersad-engagement,
  .mersad-cases,
  .mersad-process,
  .mersad-impact,
  .mersad-testimonials,
  .mersad-insights,
  .mersad-contact,
  .technology-stack,
  .service-archive,
  .service-single,
  .case-study-archive,
  .case-study-single,
  .insight-archive,
  .insight-single,
  .resources-archive,
  .resource-single,
  .mersad-about-page,
  .mersad-contact-page,
  .mersad-legal-page
) {
  color: var(--mersad-mode-text) !important;
  background-color: var(--mersad-mode-bg) !important;
}

/* Header */
html[data-theme="light"] .mersad-header__inner {
  background: rgba(247,247,245,.86) !important;
  border-color: rgba(5,5,5,.10) !important;
  box-shadow: 0 16px 42px rgba(20,20,20,.08) !important;
}
html[data-theme="light"] .mersad-header__mobile-panel {
  background: rgba(247,247,245,.97) !important;
  border-color: rgba(5,5,5,.10) !important;
  box-shadow: 0 24px 65px rgba(20,20,20,.14) !important;
}
html[data-theme="light"] :where(
  .mersad-header__brand,
  .mersad-header__brand-frame--name,
  .mersad-header__menu a,
  .mersad-header__mobile-menu a,
  .mersad-header__menu-toggle,
  .mersad-header__mobile-pref
) { color: #111 !important; }
html[data-theme="light"] .mersad-header__brand-position,
html[data-theme="light"] .mersad-header__brand-frame--position { color: #879900 !important; }
html[data-theme="light"] :where(.mersad-header__utility,.mersad-header__mobile-pref,.mersad-header__menu-toggle) {
  background: rgba(5,5,5,.025) !important;
  border-color: rgba(5,5,5,.10) !important;
}
html[data-theme="light"] .mersad-header__utility-button { color: #4d4e49 !important; }
html[data-theme="light"] .mersad-header__utility-button:hover { color: #050505 !important; background: rgba(5,5,5,.06) !important; }

/* Main section backgrounds and decorative gradients */
html[data-theme="light"] :where(
  .mersad-hero,
  .service-archive__hero,
  .case-study-archive__hero,
  .insight-archive__hero,
  .insight-single__hero,
  .resource-single__hero,
  .case-study-single__hero,
  .resources-hero
) {
  background-color: #f7f7f5 !important;
  background-image: radial-gradient(circle at 15% 35%, rgba(199,230,0,.10), transparent 31%) !important;
  border-color: rgba(5,5,5,.08) !important;
}

html[data-theme="light"] :where(
  .mersad-hero__grid-background,
  .resource-single__hero-grid,
  .case-study-archive__hero-pattern,
  .insight-archive__hero-pattern,
  .case-study-single__hero-grid,
  .resources-hero__grid
) { opacity: .065 !important; }

/* Cards / raised surfaces */
html[data-theme="light"] :where(
  .mersad-service,
  .mersad-service__panel,
  .mersad-engagement-card,
  .mersad-featured-case,
  .mersad-case-card,
  .mersad-process-step__card,
  .mersad-impact-stat,
  .mersad-testimonial-card,
  .mersad-insight,
  .service-card__link,
  .service-method-grid article,
  .service-archive__why-card,
  .service-archive__why-points p,
  .service-archive__cta-card,
  .case-study-card,
  .case-study-archive__cta-card,
  .insight-card__link,
  .insight-single__meta div,
  .insight-single__resource,
  .insight-single__cta-card,
  .resource-single__download,
  .resource-single__side,
  .resource-single__cta-panel,
  .case-study-single__meta div,
  .case-study-single__section,
  .resources-card,
  .resource-card__link,
  .mersad-contact__panel,
  .mersad-contact-modal__panel
) {
  background-color: #fff !important;
  border-color: rgba(5,5,5,.11) !important;
  box-shadow: 0 12px 38px rgba(18,18,18,.045) !important;
}

/* Primary type */
html[data-theme="light"] :where(
  h1,h2,h3,h4,h5,h6,
  .mersad-hero__title,
  .mersad-services__title,
  .mersad-cases__title,
  .mersad-process__title,
  .mersad-impact__title,
  .mersad-insights__title,
  .resource-single__content h2,
  .resource-single__content h3,
  .insight-single__editor-content h2,
  .insight-single__editor-content h3
) { color: #101010 !important; }

/* Secondary text */
html[data-theme="light"] :where(
  p,
  li,
  .mersad-body,
  .mersad-hero__description,
  .resource-single__hero-content > p,
  .resource-single__content,
  .resource-single__content p,
  .resource-single__content li,
  .insight-single__summary,
  .insight-single__editor-content,
  .insight-single__editor-content p,
  .insight-single__editor-content li
) { color: #555650 !important; }

/* Borders and dividers */
html[data-theme="light"] :where(
  .mersad-footer,
  .resource-single__body,
  .insight-single__article-section,
  .case-study-archive__content
) { border-color: rgba(5,5,5,.09) !important; }

/* Footer intentionally has a distinct dark signature even in light mode. */
html[data-theme="light"] .mersad-footer {
  background: #101010 !important;
  color: #f7f7f5 !important;
}
html[data-theme="light"] .mersad-footer :where(h2,h3,h4,strong,a) { color: #f7f7f5 !important; }
html[data-theme="light"] .mersad-footer p { color: #a9aaa5 !important; }

/* Lime is signal-only and stays controlled in light mode. */
html[data-theme="light"] :where(
  .text-lime,
  [class*="__eyebrow"],
  [class*="__label"],
  .resource-single__badges span,
  .insight-single__taxonomy span,
  .case-study-single__taxonomy span
) { color: #7d9000 !important; }

html[data-theme="light"] :where(
  .mersad-header__cta,
  .mersad-header__mobile-cta,
  .resource-single__download a,
  .resource-single__cta-panel a,
  .insight-single__resource a,
  .insight-single__cta-card a,
  .service-archive__cta-card a,
  .case-study-archive__cta-card a
) {
  color: #050505 !important;
  background: var(--mersad-mode-lime) !important;
  border-color: var(--mersad-mode-lime) !important;
}

/* Inputs */
html[data-theme="light"] :where(input,textarea,select) {
  color: #111 !important;
  background-color: #fff !important;
  border-color: rgba(5,5,5,.14) !important;
}
html[data-theme="light"] :where(input,textarea)::placeholder { color: #8a8b85 !important; }

/* Images / screenshots should not be inverted. */
html[data-theme="light"] :where(img,video,iframe,canvas,svg) { filter: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme] { scroll-behavior: auto; }
}

/* =========================================================
   HOTFIX 2026-09-17 — TRUE SITE-WIDE COLOR MODE
   Remap legacy page variables so pages cannot remain dark while
   the global mode is light.
   ========================================================= */
html[data-theme="dark"] {
  --black:#050505; --carbon:#0d0d0d; --graphite:#171717; --charcoal:#242424;
  --white:#f7f7f5; --silver:#b9b9b9; --gray:#777; --border:#343434; --lime:#d3f200;
}
html[data-theme="light"] {
  --black:#f7f7f5; --carbon:#fff; --graphite:#fff; --charcoal:#eeeeea;
  --white:#0b0b0b; --silver:#555650; --gray:#70716b; --border:#d8d8d3; --lime:#c7e600;
}
html[data-theme="light"] :where(
  .product-performance-matrix-page,.product-performance-matrix-resource,
  .funnel-leak-detector-page,.funnel-leak-detector-resource,
  .resource-tool-page,.resources-archive,.insight-archive,.service-archive,
  .case-study-archive,.case-study-single,.insight-single,.resource-single,
  .mersad-about,.mersad-contact,.mersad-legal-page
) {
  background-color:#f7f7f5 !important;
  color:#0b0b0b !important;
}
html[data-theme="light"] :where(
  .mppm__panel,.mppm__card,.mppm__kpi,.mppm__result-panel,.mppm__method-card,
  .mppm__dropzone,.mppm__funnel-stage,.mppm__table,.mppm__methodology,.mppm__cta,
  .resource-tool-page__tool,.resource-tool-page__intro,
  [class*="__card"],[class*="__panel"]
) {
  border-color:rgba(5,5,5,.12);
}

/* Theme switch stays visible and legible in both modes. */
html[data-theme="light"] .mersad-header__theme-toggle {
  background:rgba(5,5,5,.04) !important;
  border-color:rgba(5,5,5,.13) !important;
}

/* =========================================================
   HOTFIX V3 — LIGHT MODE CONTRAST PASS
   A late, site-wide correction layer for legacy dark-only CSS.
   ========================================================= */
html[data-theme="light"] {
  --mersad-light-bg: #f7f7f5;
  --mersad-light-surface: #ffffff;
  --mersad-light-surface-alt: #efefeb;
  --mersad-light-text: #10110f;
  --mersad-light-body: #484a45;
  --mersad-light-muted: #686a64;
  --mersad-light-faint: #858780;
  --mersad-light-border: rgba(16,17,15,.14);
  --mersad-light-border-strong: rgba(16,17,15,.22);
  --mersad-light-lime-text: #6d7b00;
}

html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] #main-content {
  background: var(--mersad-light-bg) !important;
  color: var(--mersad-light-text) !important;
}

/* Page shells and large sections that were authored dark-only. */
html[data-theme="light"] :where(
  .mersad-hero,.mersad-about,.mersad-services,.mersad-engagement,.mersad-cases,
  .mersad-process,.mersad-impact,.mersad-testimonials,.mersad-insights,.mersad-contact,
  .technology-stack,.service-archive,.service-single,.case-study-archive,.case-study-single,
  .insight-archive,.insight-single,.resources-archive,.resource-single,.mersad-about-page,
  .mersad-contact-page,.mersad-legal-page,.product-performance-matrix-page,
  .product-performance-matrix-resource,.funnel-leak-detector-page,.funnel-leak-detector-resource,
  .resource-tool-page
) {
  background-color: var(--mersad-light-bg) !important;
  color: var(--mersad-light-text) !important;
}

/* Strong text. */
html[data-theme="light"] :where(main,#main-content) :where(
  h1,h2,h3,h4,h5,h6,strong,b,
  [class*="__title"],[class*="__heading"],[class*="__name"],[class*="__value"]
) {
  color: var(--mersad-light-text) !important;
}

/* Reading text and descriptive copy. */
html[data-theme="light"] :where(main,#main-content) :where(
  p,li,dd,blockquote,figcaption,
  [class*="__description"],[class*="__summary"],[class*="__excerpt"],[class*="__copy"],
  [class*="__content"],[class*="__text"]
) {
  color: var(--mersad-light-body) !important;
}

/* Metadata / secondary UI. */
html[data-theme="light"] :where(main,#main-content) :where(
  small,time,[class*="__meta"],[class*="__eyebrow"],[class*="__kicker"],[class*="__label"]
) {
  color: var(--mersad-light-muted) !important;
}

/* Cards, panels, forms and table surfaces. */
html[data-theme="light"] :where(main,#main-content) :where(
  [class*="__card"],[class*="__panel"],[class*="__box"],[class*="__item"],
  .mersad-service,.mersad-insight,.case-study-card,.service-card__link,.insight-card__link,
  .resource-card__link,.resources-card,.insight-single__meta > div,.case-study-single__meta > div,
  .insight-single__resource,.resource-single__download,.resource-single__side,
  .resource-single__cta-panel,.mppm__card,.mppm__panel,.mppm__kpi,.mppm__result-panel,
  table,thead,tbody,tr,td,th
) {
  border-color: var(--mersad-light-border) !important;
}

html[data-theme="light"] :where(main,#main-content) :where(
  [class*="__card"],[class*="__panel"],[class*="__box"],
  .mersad-service,.mersad-insight,.case-study-card,.service-card__link,.insight-card__link,
  .resource-card__link,.resources-card,.insight-single__meta > div,.case-study-single__meta > div,
  .insight-single__resource,.resource-single__download,.resource-single__side,
  .resource-single__cta-panel,.mppm__card,.mppm__panel,.mppm__kpi,.mppm__result-panel
) {
  background: var(--mersad-light-surface) !important;
  box-shadow: 0 10px 30px rgba(16,17,15,.045) !important;
}

html[data-theme="light"] :where(main,#main-content) hr,
html[data-theme="light"] :where(main,#main-content) [class*="divider"],
html[data-theme="light"] :where(main,#main-content) [class*="border"] {
  border-color: var(--mersad-light-border) !important;
}

/* Article links need obvious but accessible contrast. */
html[data-theme="light"] :where(
  .insight-single__editor-content,
  .resource-single__content,
  .case-study-single__content,
  .service-single__content
) a:not([class]) {
  color: #586500 !important;
  text-decoration-color: rgba(88,101,0,.35) !important;
}

/* Signal / taxonomy / badges. */
html[data-theme="light"] :where(main,#main-content) :where(
  .text-lime,[class*="__eyebrow"],[class*="__kicker"],[class*="__section-label"],
  .insight-single__taxonomy span,.resource-single__badges span,.case-study-single__taxonomy span
) {
  color: var(--mersad-light-lime-text) !important;
}

html[data-theme="light"] :where(
  .insight-single__taxonomy span,.resource-single__badges span,.case-study-single__taxonomy span
) {
  background: rgba(109,123,0,.07) !important;
  border-color: rgba(109,123,0,.22) !important;
}

/* Real buttons / primary CTAs: keep black on lime, never inherited grey. */
html[data-theme="light"] :where(
  a.mersad-header__cta,a.mersad-header__mobile-cta,
  .mersad-btn-primary,[class*="__cta"] a,[class*="__download"] a,
  .insight-single__resource a,.resource-single__download a,.resource-single__cta-panel a
) {
  background-color: #c7e600 !important;
  border-color: #c7e600 !important;
  color: #050505 !important;
}
html[data-theme="light"] :where(
  a.mersad-header__cta,a.mersad-header__mobile-cta,
  .mersad-btn-primary,[class*="__cta"] a,[class*="__download"] a
) :where(span,strong,small,svg) {
  color: #050505 !important;
  stroke: currentColor;
}

/* Ghost / neutral controls. */
html[data-theme="light"] :where(button,input,textarea,select) {
  color: var(--mersad-light-text) !important;
  background-color: var(--mersad-light-surface) !important;
  border-color: var(--mersad-light-border-strong) !important;
}
html[data-theme="light"] :where(input,textarea)::placeholder { color: #777a72 !important; opacity: 1; }

/* Header is handled separately because its translucent shell needs stronger contrast. */
html[data-theme="light"] .mersad-header__inner,
html[data-theme="light"] .mersad-header.is-scrolled .mersad-header__inner {
  background: rgba(247,247,245,.94) !important;
  border-color: rgba(16,17,15,.14) !important;
  box-shadow: 0 12px 38px rgba(16,17,15,.10) !important;
}
html[data-theme="light"] .mersad-header__mobile-panel {
  background: rgba(247,247,245,.985) !important;
  border-color: rgba(16,17,15,.14) !important;
}
html[data-theme="light"] .mersad-header :where(
  .mersad-header__brand-frame--name,.mersad-header__menu a,.mersad-header__mobile-menu a
) { color: #171814 !important; }
html[data-theme="light"] .mersad-header :where(
  .mersad-header__language-toggle,.mersad-header__utility-button,.mersad-header__mobile-pref
) {
  color: #393b36 !important;
  background: rgba(16,17,15,.035) !important;
  border-color: rgba(16,17,15,.13) !important;
}
html[data-theme="light"] .mersad-header__mobile-pref small { color: #666960 !important; }

/* Footer deliberately stays dark in both modes. Reinstate all text after broad rules. */
html[data-theme="light"] .mersad-footer,
html[data-theme="light"] .mersad-footer * {
  border-color: rgba(255,255,255,.09);
}
html[data-theme="light"] .mersad-footer { background: #10110f !important; color: #f7f7f5 !important; }
html[data-theme="light"] .mersad-footer :where(h1,h2,h3,h4,h5,h6,strong,a) { color: #f7f7f5 !important; }
html[data-theme="light"] .mersad-footer :where(p,li,small,span) { color: #b7b8b2 !important; }

/* Code/pre blocks retain dark editor contrast in light pages. */
html[data-theme="light"] :where(pre,code,kbd,samp) {
  background: #171814 !important;
  color: #f2f2ef !important;
  border-color: rgba(16,17,15,.18) !important;
}