/* Light theme in the Qyvea logo colours (Apple-style clarity: white space, strong type, one accent).
   Logo palette: green #7AB23A, charcoal #1A2124, grey #848484.
   - white dominates: white and soft green-grey sections, charcoal text
   - charcoal only for the footer
   - logo green for buttons and accents (charcoal text on green: 7:1 contrast)
   - logo grey for lines and small details; body text uses a deeper grey for readability (WCAG AA)
   Loaded last on each page so it overrides the older dark palette. */
:root {
  --brand-green: #7AB23A;
  --brand-green-hover: #88c046;
  --brand-green-ink: #3F6B12;    /* green text on white, 6.4:1 */
  --brand-charcoal: #1A2124;
  --brand-charcoal-2: #232c30;
  --brand-grey: #848484;

  --lt-bg: #ffffff;
  --lt-bg-alt: #f3f6f0;          /* soft green-tinted grey */
  --lt-ink: #1A2124;
  --lt-ink-2: #3d4549;
  --lt-ink-3: #5c6468;
  --lt-line: rgba(26,33,36,.12);

  /* remap the older dark palette tokens (index.html / securetech.css) */
  --black: #ffffff;
  --dark: #f3f6f0;
  --dark2: #ffffff;
  --dark3: #f3f6f0;
  --card-bg: #ffffff;
  --border: rgba(26,33,36,.12);
  --border2: rgba(26,33,36,.2);
  --white: #1A2124;
  --light: #3d4549;
  --grey: #5c6468;
  --orange: #4A7D18;             /* older 'accent' token is used for text in many page styles: deeper logo green, 5:1 */
  --orange2: #3F6B12;
  --green: #4A7D18;
  --shadow: 0 12px 40px rgba(26,33,36,.08);

  /* header uses the same brand colours */
  --qh-green: #7AB23A;
  --qh-green-dark: #3F6B12;
  --qh-ink: #1A2124;
}

html, body, body.has-page-bg { background: var(--lt-bg) !important; color: var(--lt-ink); }
.page-bg { display: none !important; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: rgba(122,178,58,.3); }

/* Sections: white and soft green-grey, generous spacing */
.section, .has-page-bg .section { background: var(--lt-bg); }
.section--alt, .section--dark2, .has-page-bg .section--alt, .has-page-bg .section--dark2 { background: var(--lt-bg-alt) !important; }

/* Text */
.section p, .section li { color: var(--lt-ink-2); }
.section-label { color: var(--brand-green-ink) !important; }
.section-title, .section h2, .section h3 { color: var(--lt-ink); }
.section-sub { color: var(--lt-ink-3); }
.section p a, .section li a { color: var(--brand-green-ink); }

/* Cards: white, hairline border, soft shadow */
.card, [class*="-card"]:not(.qh__cta), .svc-block, .faq-item, .testimonial, .tt-card {
  background: #fff;
  border-color: var(--lt-line);
}

/* White dominates, heroes included. Charcoal only for the footer (dark tokens restored inside it).
   CTA strips use the soft green-grey. */
.cta-section, .has-page-bg .cta-section { background: var(--lt-bg-alt) !important; border-top: 1px solid var(--lt-line); border-bottom: 1px solid var(--lt-line); }
.footer, .has-page-bg .footer {
  --white: #ffffff; --light: #d9dedb; --grey: #a9b0ad; --border: rgba(255,255,255,.12); --border2: rgba(255,255,255,.2);
  --black: #1A2124; --dark: #1A2124; --dark2: #232c30; --dark3: #2b3539; --card-bg: #232c30;
  color: #f4f6f2;
}
.footer, .has-page-bg .footer { background: var(--brand-charcoal) !important; }
.footer a { color: #c9cfcc; }
/* Heroes: white with a faint green wash so the page opens bright */
.hero, .service-hero { background: linear-gradient(180deg, #f3f6f0 0%, #ffffff 100%) !important; }
.footer a:hover { color: #fff; }

/* Buttons in the logo green */
.btn--primary, .btn--green, .btn-primary { background: var(--brand-green) !important; color: var(--brand-charcoal) !important; border-color: var(--brand-green) !important; }
.btn--primary:hover, .btn--green:hover, .btn-primary:hover { background: var(--brand-green-hover) !important; }

/* ---------- Contrast fixes for older inline colours (found with a contrast audit) ---------- */
:root { --brand-green-display: #5E9A22; }   /* large green headings on white: 3.4:1 */

/* Inline white text on (now) white backgrounds -> charcoal */
[style*="color:#fff"], [style*="color: #fff"], [style*="color:#FFF"], [style*="color:#ffffff"], [style*="color: #ffffff"],
[style*="color:white"], [style*="color: white"], [style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"],
[style*="color:var(--white)"], [style*="color: var(--white)"] { color: var(--lt-ink) !important; }
/* ...but keep white where the element or its container is dark or green */
[style*="background"][style*="color:#fff"], [style*="background"][style*="color: #fff"], [style*="background"][style*="color:white"],
[style*="background"][style*="color:rgba(255,255,255"],
.footer [style*="color"], .btn[style*="color"], .qh__cta[style*="color"],
[style*="background:#0"] [style*="color"], [style*="background:#1"] [style*="color"], [style*="background: #0"] [style*="color"], [style*="background: #1"] [style*="color"],
[style*="background:rgba(0"] [style*="color"], [style*="background: rgba(0"] [style*="color"], [style*="background:#000"] [style*="color"] { color: #fff !important; }
/* white text on a green badge/circle -> charcoal (7:1) */
[style*="background:#22C55E"][style*="color:#fff"],
[style*="background:#8fc726"][style*="color:#fff"], [style*="background:#8CC63F"][style*="color:#fff"] { color: var(--brand-charcoal) !important; }

/* Brand green used as TEXT on white -> deeper green-ink (buttons keep the logo green fill) */
[style*="color:var(--orange)"], [style*="color: var(--orange)"], [style*="color:var(--green)"], [style*="color: var(--green)"],
[style*="color:#8fc726"], [style*="color: #8fc726"], [style*="color:#22C55E"], [style*="color:#8CC63F"], [style*="color:#82b329"] { color: var(--brand-green-ink) !important; }
.footer [style*="color:var(--orange)"], .footer [style*="color:var(--green)"] { color: var(--brand-green) !important; }
.line2, .hero__title .line2 { color: var(--brand-green-display) !important; }
.pj-tag { color: var(--brand-green-ink) !important; }
.section a:not(.btn):not([class*="btn"]):not(.qh__cta) { color: var(--brand-green-ink); }

/* Hero text (was white on the photo) */
.hero__title { color: var(--lt-ink); }
.hero__subtitle { color: var(--lt-ink-2) !important; }
.hero__proof { color: var(--lt-ink-3) !important; }
.hero__proof b { color: var(--lt-ink) !important; }
.btn--secondary { color: var(--lt-ink) !important; border-color: var(--lt-line) !important; background: #fff !important; }
.btn--secondary:hover { border-color: var(--lt-ink) !important; }

/* WhatsApp buttons: darker WhatsApp green so white text passes (was 2:1 even on the old theme) */
.btn--wa, .whatsapp-fab-btn, .mobile-contact-bar__btn--wa { background: #0B7A6B !important; color: #fff !important; }   /* 5:1 with white */
.btn--wa:hover, .whatsapp-fab-btn:hover, .mobile-contact-bar__btn--wa:hover { background: #096759 !important; }

/* Rating stars and alert red: deeper tones that read on white */
[style*="color:#fbbf24"], [style*="color: #fbbf24"], [style*="color:#FBBF24"] { color: #b7791f !important; }
[style*="color:#e0324a"], [style*="color: #e0324a"] { color: #c0152f !important; }

/* Outline buttons that were white-on-photo: charcoal outline on white */
[style*="background:transparent"][style*="color:#fff"], [style*="background: transparent"][style*="color:#fff"] { color: var(--lt-ink) !important; border-color: var(--lt-ink) !important; }
/* Green accent word inside section titles ("Where we <span>install</span>") */
.section-title span, .section h2 > span { color: var(--brand-green-display) !important; }

/* ---------- Shared components (audit round 2: service, guide and gallery pages) ---------- */
:root { --brand-green-display: #4A7D18; }   /* green accent words: 5:1 on white, 4.6:1 on the soft grey */
.section h4, .section h5, .section h6 { color: var(--lt-ink); }
.skip-link { color: var(--brand-charcoal) !important; }
.process__number, .pricing-card__price { color: var(--brand-green-ink) !important; }
.pricing-card__badge { background: var(--brand-green) !important; color: var(--brand-charcoal) !important; }
/* product gallery cards on service pages */
.gallery-card h4, .gallery-card h3, [class*="gallery"] h4, .gallery-price-now { color: var(--lt-ink) !important; }
.gallery-price-old { color: var(--lt-ink-3) !important; }
.gallery-store-btn { color: var(--brand-charcoal) !important; }
/* small coloured badges: deeper fills so white text passes */
.gallery-badge-sale { background: #c8102e !important; }
.gallery-badge-featured { background: #047857 !important; }
.gallery-badge-labour { background: #1d4ed8 !important; }

/* ---------- Dark content panels -> light cards (from a scan of every page's styles) ----------
   Knowledge-base (.kb-*), estate (.es-*), guards (.sg-*), projects (.pj-*) and decision/approach cards.
   Media overlays (video play buttons, lightbox, photo captions) intentionally stay dark. */
.kb-main, .kb-card, .kb-links > div, .kb-cta, .kb-toc-m, .kb-fig, .kb-pn a, .kb-node, .kb-diagram, .kb-chip,
.kb-feature, .kb-start a, .kb-services a, .kb-search input,
.approach-card, .decision-card, .contact-box, .tt-card,
.es-chain__node, .es-audit__checks span, .es-audit__out, .es-pass, .es-tags span, .es-dash, .es-dash__kpi, .es-dash__cell, .es-docs span,
.sg-card, .sg-feat, .sg-int a, .sg-step, .sg-faq details, .sg-guides a, .sg-float,
.pj-card, .pj-msg {
  background: #fff !important;
  border-color: var(--lt-line) !important;
  color: var(--lt-ink);
}
.kb-main { box-shadow: 0 1px 2px rgba(26,33,36,.04), 0 8px 30px rgba(26,33,36,.06); border: 1px solid var(--lt-line); }
.kb-card img, .pj-media { background: var(--lt-bg-alt) !important; }
.kb-chip, .es-tags span, .es-docs span, .kb-search input { background: var(--lt-bg-alt) !important; }
.es-table th:first-child, .es-table td:first-child { background: var(--lt-bg-alt) !important; color: var(--lt-ink) !important; }
.sg-hero, .sg-ph { background: var(--lt-bg-alt) !important; }
.gallery__caption { background: rgba(26,33,36,.78) !important; color: #fff !important; }

/* Tinted callouts keep their colour hint, now on white */
.kb-quick { background: #f1f7ea !important; border-color: rgba(74,125,24,.3) !important; }
.kb-call--tip { background: #f1f7ea !important; }
.kb-call--important { background: #fff8e6 !important; border-color: rgba(183,121,31,.35) !important; }
.kb-call--warning { background: #fdeeee !important; border-color: rgba(192,21,47,.3) !important; }
.kb-call--warning strong, [style*="color:#ff8a8a"] { color: #b3122b !important; }

/* Text inside these panels */
.kb-main p, .kb-main li, .kb-main td, .kb-node, .kb-call, .es-chain__node { color: var(--lt-ink-2) !important; }
.kb-main h2, .kb-main h3, .kb-main h4, .kb-main strong, .kb-main summary, .kb-main th { color: var(--lt-ink) !important; }
.kb-main small, .kb-diagram__title, .kb-pn small { color: var(--lt-ink-3) !important; }
.kb-quick__label, .kb-main a:not([class*="btn"]) { color: var(--brand-green-ink) !important; }

/* Footer logo word and highlights on charcoal: bright logo green */
.footer span, .footer strong { color: inherit; }
.footer [class*="logo"] span, .footer strong { color: var(--brand-green) !important; }

/* Green fills with text: charcoal on the bright logo green (7:1) */
.skip-link, .gallery-store-btn, .pj-btn, .pcl-cluster__num, .es-vflow__n { background: var(--brand-green) !important; color: var(--brand-charcoal) !important; }

/* Guards pages: FAQ questions and bold labels that were white */
.sg-section strong, .sg-faq summary, details summary { color: var(--lt-ink) !important; }

/* ---------- Audit round 3 (preview crawl: policy pages, services, PA, guards) ---------- */
.section h2 .num { background: var(--brand-green) !important; color: var(--brand-charcoal) !important; }
.sg-tags span { background: #fff !important; color: var(--lt-ink) !important; border-color: var(--lt-line) !important; }
.svc-tag { color: #2f5410 !important; }
/* older policy/terms pages set light-grey text directly */
.section li, .section td, .contact-row, .stat__label { color: var(--lt-ink-2) !important; }
.section th, .card-title, p.updated { color: var(--lt-ink) !important; }
p.updated { color: var(--lt-ink-3) !important; }
/* slider arrows and small coloured badges */
.service-showcase-btn--modern { background: #fff !important; color: var(--lt-ink) !important; border: 1px solid var(--lt-line) !important; box-shadow: 0 2px 8px rgba(26,33,36,.1); }
.service-showcase-badge--modern { background: #c2410c !important; }
[style*="background:#e0324a"] { background: #c0152f !important; }
.framework-step { color: #2f5410 !important; }
.stack-layer__num { background: var(--brand-green) !important; color: var(--brand-charcoal) !important; }

/* Gate landing pages (.gx, css/gate-pages.css): readability on the white storefront */
main.gx nav a, main.gx nav span, main.gx [class*="crumb"] a, main.gx [class*="crumb"] span, .gx-stat span { color: var(--lt-ink-3) !important; }
.gx-stock { color: #15803d !important; }
.gx-btn--buy { background: var(--brand-green) !important; color: var(--brand-charcoal) !important; }
.gx-btn--buy:hover { background: var(--brand-green-hover) !important; }
.gx-btn--wa { background: #0B7A6B !important; color: #fff !important; }
.gx-btn--wa:hover { background: #096759 !important; }

/* "Price guides" block on service hub pages (tools/landing-pages/build.mjs) */
.qpg { background: var(--lt-bg-alt) !important; padding: 48px 0 !important; border-top: 1px solid var(--lt-line); }
.qpg .section-title { margin-bottom: 18px; }
.qpg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.qpg__grid a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--lt-line); border-radius: 12px; color: var(--lt-ink) !important; font-weight: 700; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.qpg__grid a:hover { border-color: var(--brand-green); box-shadow: 0 6px 20px rgba(26,33,36,.08); }
.qpg__grid a span { font-weight: 500; font-size: 13.5px; color: var(--brand-green-ink); }