/*!
 * tdb-light-pro.css — authoritative light-mode layer for tuning-database.co.uk
 * Loaded DEAD LAST so it wins every specificity tie. Every rule is scoped under
 * `body.light-mode` only — dark mode (default, no class) is never touched.
 *
 * Rule of the file: no element may render dark-text-on-dark or light-text-on-light.
 * Surfaces become paper-white, text becomes high-contrast slate, accents stay blue.
 * Built 2026-06-20 after a full per-section light-mode audit.
 */

/* ============================================================= TOKENS */
body.light-mode{
  --lp-page:#f7f9fc;          /* page background            */
  --lp-card:#ffffff;          /* primary card surface       */
  --lp-card-2:#f4f7fb;        /* tonal / inset surface      */
  --lp-tint:#eef4ff;          /* featured blue tint         */
  --lp-tint-bd:color-mix(in srgb, var(--tdb-accent) 28%, transparent);
  --lp-bd:rgba(15,23,42,.10); /* hairline border            */
  --lp-bd-2:rgba(15,23,42,.06);
  --lp-ink:var(--tdb-on-light);           /* strongest text             */
  --lp-body:var(--tdb-on-light);          /* body text                  */
  --lp-mut:#475569;           /* muted (min AA on white)    */
  --lp-acc:var(--tdb-accent);           /* accent blue                */
  --lp-acc-d:var(--tdb-accent);         /* deep accent                */
  --lp-teal:var(--tdb-support);          /* deep teal for gradients    */
  --lp-ok:#0f766e;            /* success ink                */
  --lp-sh-sm:0 1px 2px rgba(15,23,42,.05);
  --lp-sh:0 10px 30px -18px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.05);
  --lp-sh-lg:0 24px 60px -28px rgba(15,23,42,.34);
}

/* ============================================== GLOBAL READABILITY FIXES */
/* The faint section sub-paragraphs + muted helper text were too light on white */
body.light-mode .ts2-section-sub,
body.light-mode .ts2-lede,
body.light-mode .tdb-hero4-lede{ color:var(--lp-body) !important; }

body.light-mode .ts2-mini-eyebrow,
body.light-mode .tdb-also-lbl,
body.light-mode .tdb-dev-lbl{ color:var(--lp-acc-d) !important; }

/* ===================================================== A. HERO HEADLINE */
/* Gradient-clipped headline was near-white on a white page. Re-tint darker. */
body.light-mode .ts2-h1-grad{
  background-image:linear-gradient(120deg,var(--lp-acc-d) 0%,var(--lp-teal) 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:var(--lp-acc-d) !important;
}
/* Lede highlight <strong>own</strong> was pure white = invisible */
body.light-mode .ts2-lede strong,
body.light-mode .tdb-hero4-lede strong{ color:var(--lp-acc-d) !important;-webkit-text-fill-color:var(--lp-acc-d) !important; }

/* Hero rotating feature caption (from tdb-hero-gallery.css, loads after lm) */
body.light-mode .tdbhg-fc-eyebrow{ color:var(--lp-acc-d) !important; }
body.light-mode .tdbhg-fc-title{ color:var(--lp-ink) !important; }
body.light-mode .tdbhg-fc-desc{ color:var(--lp-body) !important; }

/* =================================================== B. STATS STRIP */
body.light-mode .tdb-specs{
  background:var(--lp-card) !important;
  border:1px solid var(--lp-bd) !important;
  box-shadow:var(--lp-sh) !important;
}
body.light-mode .tdb-spec{ border-color:var(--lp-bd-2) !important; }
body.light-mode .tdb-spec-n{
  background-image:linear-gradient(120deg,var(--lp-acc-d),var(--lp-teal)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:var(--lp-acc-d) !important;
}
body.light-mode .tdb-spec-l{ color:var(--lp-mut) !important; }

/* =============================================== C. COMPARISON TABLE */
body.light-mode .tdb-cmp2-wrap{
  background:var(--lp-card) !important;
  border:1px solid var(--lp-bd) !important;
  box-shadow:var(--lp-sh) !important;
}
body.light-mode .tdb-cmp2,
body.light-mode .tdb-cmp2 thead,
body.light-mode .tdb-cmp2 tbody,
body.light-mode .tdb-cmp2 tr{ background:transparent !important; }
body.light-mode .tdb-cmp2 th,
body.light-mode .tdb-cmp2 td{
  color:var(--lp-body) !important;
  background-image:none !important;
  border-color:var(--lp-bd) !important;
}
body.light-mode .tdb-cmp2 thead th,
body.light-mode .tdb-cmp2 th[scope="row"]{ color:var(--lp-ink) !important; }
/* highlighted "you own it" column */
body.light-mode .tdb-cmp2-you{
  background:var(--lp-tint) !important;
  color:var(--lp-ink) !important;
  border-color:var(--lp-tint-bd) !important;
}
body.light-mode .tdb-cmp2-you span{ color:var(--lp-acc-d) !important; }
body.light-mode .tdb-cmp2 .bi-check-circle-fill,
body.light-mode .tdb-cmp2-you .bi{ color:var(--lp-ok) !important; }
body.light-mode .tdb-cmp2 .bi-x-circle,
body.light-mode .tdb-cmp2 .bi-x-circle-fill{ color:var(--tdb-danger) !important; }

/* ==================================================== D. MODE CARDS */
body.light-mode .tdb-mode{
  background:var(--lp-card) !important;
  background-image:none !important;
  border:1px solid var(--lp-bd) !important;
  box-shadow:var(--lp-sh) !important;
  color:var(--lp-body) !important;
}
body.light-mode .tdb-mode h3{ color:var(--lp-ink) !important; }
body.light-mode .tdb-mode-who{ color:var(--lp-mut) !important; }
body.light-mode .tdb-mode p,
body.light-mode .tdb-mode li{ color:var(--lp-body) !important; }
body.light-mode .tdb-mode-ic{
  background:var(--lp-tint) !important;color:var(--lp-acc-d) !important;
  border:1px solid var(--lp-tint-bd) !important;
}
body.light-mode .tdb-mode--feature{
  background:var(--lp-tint) !important;background-image:none !important;
  border:1.5px solid var(--lp-tint-bd) !important;
  box-shadow:0 24px 60px -28px rgba(37,99,235,.45) !important;
}
body.light-mode .tdb-mode-badge{
  background:linear-gradient(120deg,var(--lp-acc),var(--tdb-support)) !important;color:var(--tdb-accent-ink) !important;
}
body.light-mode .tdb-mode .bi-check2,
body.light-mode .tdb-mode .bi-check,
body.light-mode .tdb-mode li .bi{ color:var(--lp-ok) !important; }

/* ===================================================== E. PIPELINE */
body.light-mode .tdb-pipe-step{
  background:var(--lp-card) !important;background-image:none !important;
  border:1px solid var(--lp-bd) !important;box-shadow:var(--lp-sh) !important;
  color:var(--lp-body) !important;
}
body.light-mode .tdb-pipe-step h3,
body.light-mode .tdb-pipe-n{ color:var(--lp-ink) !important; }
body.light-mode .tdb-pipe-d{ color:var(--lp-mut) !important; }
body.light-mode .tdb-pipe-ic{
  background:var(--lp-tint) !important;color:var(--lp-acc-d) !important;
  border:1px solid var(--lp-tint-bd) !important;
}
body.light-mode .tdb-pipe-line{ background:var(--lp-bd) !important; }
body.light-mode .tdb-pipe-flow{ background:linear-gradient(90deg,var(--lp-acc),var(--tdb-support)) !important; }
body.light-mode .tdb-pipe-token{
  background:var(--lp-acc) !important;color:#fff !important;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.6) !important;
}

/* ===================================================== F. FILE-MATCH LOOP */
body.light-mode .tdb-loop-step{
  background:var(--lp-card) !important;background-image:none !important;
  border:1px solid var(--lp-bd) !important;box-shadow:var(--lp-sh) !important;
  color:var(--lp-body) !important;
}
body.light-mode .tdb-loop-step h3{ color:var(--lp-ink) !important; }
body.light-mode .tdb-loop-step p{ color:var(--lp-mut) !important; }
body.light-mode .tdb-loop-ic{
  background:var(--lp-tint) !important;color:var(--lp-acc-d) !important;
  border:1px solid var(--lp-tint-bd) !important;
}
body.light-mode .tdb-loop-arrow{ color:var(--lp-acc) !important; }
body.light-mode .tdb-loop-note{
  background:var(--lp-card-2) !important;background-image:none !important;
  border:1px solid var(--lp-bd) !important;color:var(--lp-body) !important;
}
body.light-mode .tdb-loop-note strong,
body.light-mode .tdb-loop-paid{ color:var(--lp-ink) !important; }

/* ===================================================== G. BUILD CARDS */
body.light-mode .tdb-build-card{
  background:var(--lp-card) !important;background-image:none !important;
  border:1px solid var(--lp-bd) !important;box-shadow:var(--lp-sh) !important;
  color:var(--lp-body) !important;
}
body.light-mode .tdb-build-card.tdb-build-free{
  background:linear-gradient(160deg,#ecfdf5,#ffffff) !important;
  border-color:color-mix(in srgb, var(--tdb-success) 30%, transparent) !important;
}
body.light-mode .tdb-build-card.tdb-build-custom{
  background:linear-gradient(160deg,var(--lp-tint),#ffffff) !important;
  border-color:var(--lp-tint-bd) !important;
}
body.light-mode .tdb-build-card h3{ color:var(--lp-ink) !important; }
body.light-mode .tdb-build-card p{ color:var(--lp-body) !important; }
body.light-mode .tdb-build-ic{ background:#fff !important;border:1px solid var(--lp-bd) !important; }
body.light-mode .tdb-build-tag{ background:#d1fae5 !important;color:#065f46 !important; }
body.light-mode .tdb-build-tag-c{ background:var(--lp-tint) !important;color:var(--lp-acc-d) !important; }

/* "Also in every licence" dark band + chips */
body.light-mode .tdb-dev{
  background:var(--lp-card-2) !important;background-image:none !important;
  border:1px solid var(--lp-bd) !important;box-shadow:var(--lp-sh-sm) !important;
}
body.light-mode .tdb-dev-item{ color:var(--lp-body) !important;border-color:var(--lp-bd) !important; }
body.light-mode .tdb-dev-item .bi{ color:var(--lp-ok) !important; }

/* ===================================================== H. ALSO CHIPS */
body.light-mode .tdb-also-chips > span{
  background:var(--lp-card) !important;
  color:var(--lp-body) !important;
  border:1px solid var(--lp-bd) !important;
  box-shadow:var(--lp-sh-sm) !important;
}
body.light-mode .tdb-also-chips > span .bi{ color:var(--lp-acc) !important; }

/* ===================================================== I. HOST / MANAGED BAND */
body.light-mode .tdb-host{
  background:linear-gradient(160deg,#eef4ff,#f7f9fc) !important;
  border:1px solid var(--lp-bd) !important;box-shadow:var(--lp-sh) !important;
}
body.light-mode .tdb-host-head h3,
body.light-mode .tdb-host-head{ color:var(--lp-ink) !important; }
body.light-mode .tdb-host-head p{ color:var(--lp-mut) !important; }
body.light-mode .tdb-host-card{
  background:var(--lp-card) !important;background-image:none !important;
  border:1px solid var(--lp-bd) !important;box-shadow:var(--lp-sh-sm) !important;
}
body.light-mode .tdb-host-name{ color:var(--lp-acc-d) !important; }
body.light-mode .tdb-host-price{ color:var(--lp-ink) !important; }
body.light-mode .tdb-host-price small{ color:var(--lp-mut) !important; }
body.light-mode .tdb-host-card ul,
body.light-mode .tdb-host-card li,
body.light-mode .tdb-host-feat{ color:var(--lp-body) !important; }
body.light-mode .tdb-host-card.tdb-host-feat{
  background:var(--lp-tint) !important;border:1.5px solid var(--lp-tint-bd) !important;
}
body.light-mode .tdb-host-badge{
  background:linear-gradient(120deg,var(--lp-acc),var(--tdb-support)) !important;color:var(--tdb-accent-ink) !important;
  -webkit-text-fill-color:#fff !important;
}

/* ===================================================== J. EARLY-ADOPTER BAND */
body.light-mode .tdb-ea{
  background:linear-gradient(135deg,#ecfdf5,#eef4ff) !important;
  border:1px solid color-mix(in srgb, var(--tdb-success) 28%, transparent) !important;box-shadow:var(--lp-sh) !important;
}
body.light-mode .tdb-ea-lead{ color:var(--lp-ink) !important; }
body.light-mode .tdb-ea-count{ color:var(--lp-ok) !important; }
body.light-mode .tdb-ea-now{ color:var(--lp-ink) !important; }
body.light-mode .tdb-ea-now strong{ color:var(--lp-acc-d) !important; }
body.light-mode .tdb-ea-after{ color:var(--lp-mut) !important; }
body.light-mode .tdb-ea-bar{ background:color-mix(in srgb, var(--tdb-ground) 10%, transparent) !important; }
body.light-mode .tdb-ea-fill{ background:linear-gradient(90deg,var(--tdb-success),var(--lp-acc)) !important; }
body.light-mode .tdb-ea-dot{ background:var(--tdb-success) !important; }

/* ===================================================== K0. DRIVER PRICE LISTS */
body.light-mode .tdb-driver-col{
  background:var(--lp-card) !important;background-image:none !important;
  border:1px solid var(--lp-bd) !important;box-shadow:var(--lp-sh) !important;
  color:var(--lp-body) !important;
}
body.light-mode .tdb-driver-col h4{ color:var(--lp-ink) !important; }
body.light-mode .tdb-driver-col li{ color:var(--lp-body) !important;border-color:var(--lp-bd-2) !important; }
body.light-mode .tdb-driver-col li span{ color:var(--lp-body) !important; }
body.light-mode .tdb-driver-col li b{ color:var(--lp-acc-d) !important; }
body.light-mode .tdb-driver-head h2,
body.light-mode .tdb-driver-head .ts2-h2{ color:var(--lp-ink) !important; }
body.light-mode .tdb-driver-head p{ color:var(--lp-body) !important; }

/* ===================================================== K. DELIVERABLE MOCKUPS */
/* Intentional dark "product screenshots" — keep dark, add a clean frame,
   and force inner text light (the global light rule had darkened it). */
body.light-mode .tdb-doc,
body.light-mode .tdb-wl-frame{
  background:var(--tdb-ground) !important;
  border:1px solid color-mix(in srgb, var(--tdb-line) 14%, transparent) !important;
  box-shadow:0 26px 60px -28px rgba(15,23,42,.45) !important;
}
body.light-mode .tdb-doc *,
body.light-mode .tdb-wl-frame *{ border-color:color-mix(in srgb, var(--tdb-line) 16%, transparent) !important; }
body.light-mode .tdb-doc :where(span,small,h3,h4,p,td,th,strong,b,div,li),
body.light-mode .tdb-wl-frame :where(span,small,h3,h4,p,strong,b,div,li){ color:var(--tdb-text) !important; }
body.light-mode .tdb-doc-hd,
body.light-mode .tdb-wl-url{ color:var(--tdb-body) !important; }

/* ===================================================== L. CUSTOMER WALL */
body.light-mode .tdbcw-card{
  background:var(--lp-card) !important;
  border:1px solid var(--lp-bd) !important;
  box-shadow:var(--lp-sh-sm) !important;
}
body.light-mode .tdbcw-nm{ color:var(--lp-ink) !important; }
body.light-mode .tdbcw-meta,
body.light-mode .tdbcw-sub{ color:var(--lp-mut) !important; }
body.light-mode .tdbcw-chip{
  background:var(--lp-card-2) !important;color:var(--lp-body) !important;
  border:1px solid var(--lp-bd) !important;
}
body.light-mode .tdbcw-eyebrow{ color:var(--lp-acc-d) !important; }
body.light-mode .tdbcw-h2{ color:var(--lp-ink) !important; }
body.light-mode .tdbcw-spot{
  background:linear-gradient(160deg,var(--lp-tint),#ffffff) !important;
  border:1px solid var(--lp-tint-bd) !important;box-shadow:var(--lp-sh) !important;
}
body.light-mode .tdbcw-visit{ color:var(--lp-acc-d) !important; }
body.light-mode .tdbcw-word{ color:var(--lp-acc-d) !important; }

/* ===================================================== L2. FOOTER POLICY STRIP */
/* Near-black links strip below a light footer — flip it to match the page. */
body.light-mode .tdb-policy-strip,
body.light-mode #tdb-policy-strip{
  background:#f1f5f9 !important;
  border-top:1px solid var(--lp-bd) !important;
  color:var(--lp-mut) !important;
}
body.light-mode .tdb-policy-strip a,
body.light-mode #tdb-policy-strip a{ color:var(--lp-body) !important; }
body.light-mode .tdb-policy-strip a:hover,
body.light-mode #tdb-policy-strip a:hover{ color:var(--lp-acc-d) !important; }
body.light-mode #tdb-policy-strip .sep{ color:var(--lp-bd) !important; }
body.light-mode .tdb-pay-wrap{ color:var(--lp-mut) !important; }

/* ===================================================== L3. PRODUCT PAGE HERO */
/* WooCommerce product hero (.tdb-hero, e.g. /custom-file/...). The section's
   dark radial+linear gradient (style.min.css) was never flipped → whole product
   summary read dark in light mode. Text/cards/grid already had light handling. */
body.light-mode .tdb-hero{
  background:
    radial-gradient(1200px 600px at 80% 15%, color-mix(in srgb, var(--tdb-accent) 7%, transparent) 0%, transparent 58%),
    radial-gradient(900px 500px at 10% 10%, color-mix(in srgb, var(--tdb-support) 6%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef3fb 100%) !important;
}
body.light-mode .tdb-hero__price-card,
body.light-mode .tdb-hero__ecu-card,
body.light-mode .tdb-espec{
  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--lp-bd) !important;
  box-shadow:var(--lp-sh) !important;
}
body.light-mode .tdb-hero__eyebrow-chip{ color:var(--lp-mut) !important;border-color:var(--lp-bd) !important; }
body.light-mode .tdb-hero__micro-trust{ color:var(--lp-mut) !important; }

/* ===================================================== L4. SERVICES PAGE */
body.light-mode .ts2-fs-step,
body.light-mode .ts2-fs-svc,
body.light-mode .ts2-fs-ecu-card{
  background:var(--lp-card) !important; background-image:none !important;
  border:1px solid var(--lp-bd) !important; box-shadow:var(--lp-sh) !important;
}
body.light-mode .ts2-fs-step-nu,
body.light-mode .ts2-fs-ecu-cou{ color:var(--lp-acc-d) !important; }

/* ===================================================== L5. FAQ PAGE */
body.light-mode .tdbf-chip{
  background:var(--lp-card) !important; color:var(--lp-body) !important;
  border:1px solid var(--lp-bd) !important;
}
body.light-mode .tdbf-chip.is-active,
body.light-mode .tdbf-chip.active,
body.light-mode .tdbf-chip[aria-selected="true"]{
  background:var(--lp-tint) !important; color:var(--lp-acc-d) !important; border-color:var(--lp-tint-bd) !important;
}

/* ===================================================== L6. ABOUT PAGE */
body.light-mode .tdba-stat-card{
  background:var(--lp-card) !important; background-image:none !important;
  border:1px solid var(--lp-bd) !important; box-shadow:var(--lp-sh) !important;
}
/* ops console = a terminal mockup; keep it dark (like the homepage deliverable
   screenshots), frame it, and undo the global rule's text-darkening. Greens kept. */
body.light-mode .tdba-ops{
  border:1px solid color-mix(in srgb, var(--tdb-line) 14%, transparent) !important;
  box-shadow:0 26px 60px -28px rgba(15,23,42,.4) !important;
}
/* A FIXED surface needs a FIXED ink.
   .tdba-ops is a terminal mockup: its background stays #070b15 in BOTH themes.
   Two earlier fixes reached for var(--tdb-text) and var(--tdb-body) to "undo the
   darkening" - but those tokens ARE dark in light mode, so each one repainted
   dark ink onto a dark panel. Measured 1.1:1 across 18 elements on /about-us/.
   Theme tokens belong on theme-aware surfaces; this one is not. */
body.light-mode .tdba-ops,
body.light-mode .tdba-ops *:not(.tdba-cmd-done){ color:#e8edf7 !important; }
body.light-mode .tdba-ops :is(.tdba-desc, .tdba-stat){ color:#9aa3b6 !important; }
body.light-mode .tdba-ops-bar{ color:#9aa3b6 !important; }

/* ===================================================== L7. CONTACT PAGE */
body.light-mode .tdbc-chat{
  background:var(--lp-card) !important; background-image:none !important;
  border:1px solid var(--lp-bd) !important; box-shadow:var(--lp-sh) !important;
}
body.light-mode .tdbc-chat-bar{ background:var(--lp-card-2) !important; border-color:var(--lp-bd) !important; }

/* ===================================================== M. DEV PULSE WIDGET */
/* Surfaces read CSS vars that only carry a dark fallback. Re-point the vars on
   the widget root so every .tsp-* surface flips at once, plus explicit fallbacks. */
body.light-mode #ts-pulse,
body.light-mode .tsp-card-block{
  --surface:#ffffff; --surface-2:var(--tdb-raised);
  --border:color-mix(in srgb, var(--tdb-line) 10%, transparent); --border-strong:color-mix(in srgb, var(--tdb-line) 18%, transparent);
  --hairline:color-mix(in srgb, var(--tdb-line) 12%, transparent); --text-3:var(--tdb-muted);
}
body.light-mode .tsp-card-block,
body.light-mode .tsp-stats{
  background:#ffffff !important;border:1px solid var(--lp-bd) !important;
  box-shadow:var(--lp-sh) !important;
}
body.light-mode .tsp-rel{
  background:var(--lp-card-2) !important;border:1px solid var(--lp-bd) !important;
}
body.light-mode .tsp-stat{ border-color:var(--lp-bd-2) !important; }
body.light-mode .tsp-stat-label{ color:var(--lp-mut) !important; }
body.light-mode .tsp-stat-sub{ color:var(--lp-mut) !important; }
body.light-mode .tsp-head,
body.light-mode .tsp-head h3,
body.light-mode .tsp-rel-top{ color:var(--lp-ink) !important; }
body.light-mode .tsp-cat-track,
body.light-mode .tsp-l0{ background:color-mix(in srgb, var(--tdb-ground) 8%, transparent) !important; }
body.light-mode .tsp-chart-wrap{ background:var(--lp-card-2) !important;border:1px solid var(--lp-bd) !important; }