/*
 * Dark theme for the website (generated from style.css, landing.css and
 * audience-pages.css; regenerate if those change a lot). Turned on by
 * data-theme="dark" on <html>, set by assets/js/theme.js (light / dark /
 * same as device).
 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface:      #111a14;
  --white:        #0c120e;
  --border:       #26342b;
  --text-1:       #eef3ef;
  --text-2:       #c9d4cc;
  --text-3:       #9fb0a5;
  --text-4:       #7d8e83;
  --green-pale:   #12301f;
  --amber-pale:   #3a2c0c;
  --blue-pale:    #10223d;
  --purple-pale:  #221a3d;
  --g4y-ink:      #eef3ef;
  --g4y-line:     #26342b;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.5);
  --shadow:       0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.6);
}
:root[data-theme="dark"] body { background: #0c120e; color: #eef3ef; }

/* Light panels and cards become dark surfaces */
:root[data-theme="dark"] .dashboard-mockup,
:root[data-theme="dark"] .mockup-bar,
:root[data-theme="dark"] .mockup-url,
:root[data-theme="dark"] .mockup-example-tag,
:root[data-theme="dark"] .mock-map,
:root[data-theme="dark"] .float-card,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .general,
:root[data-theme="dark"] .mpesa-preview,
:root[data-theme="dark"] .step,
:root[data-theme="dark"] .role-card,
:root[data-theme="dark"] .phone-screen,
:root[data-theme="dark"] .toggle-slider::before,
:root[data-theme="dark"] .pricing-card,
:root[data-theme="dark"] .plan-btn-outline,
:root[data-theme="dark"] .testimonial-card,
:root[data-theme="dark"] .cta-section .btn-primary,
:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group select,
:root[data-theme="dark"] .form-group textarea,
:root[data-theme="dark"] .point-card,
:root[data-theme="dark"] .post-mock,
:root[data-theme="dark"] .wt-tile,
:root[data-theme="dark"] .gig-search,
:root[data-theme="dark"] .gig-chip,
:root[data-theme="dark"] .gig-card,
:root[data-theme="dark"] .lp-header,
:root[data-theme="dark"] .lp-card,
:root[data-theme="dark"] .landing-hero .landing-inner > p:first-of-type,
:root[data-theme="dark"] .audience-product,
:root[data-theme="dark"] .product-label,
:root[data-theme="dark"] .task-icon.task-amber,
:root[data-theme="dark"] .task-state,
:root[data-theme="dark"] .audience-page .audience-note,
:root[data-theme="dark"] .audience-page .audience-listings,
:root[data-theme="dark"] .audience-page .audience-playbook-alt,
:root[data-theme="dark"] .audience-journey-card,
:root[data-theme="dark"] .journey-number,
:root[data-theme="dark"] .audience-page .audience-types,
:root[data-theme="dark"] .audience-type-pills span,
:root[data-theme="dark"] .audience-guide,
:root[data-theme="dark"] .audience-towns,
:root[data-theme="dark"] .audience-town-grid li,
:root[data-theme="dark"] .audience-explore-card,
:root[data-theme="dark"] .audience-page .gig-page article,
:root[data-theme="dark"] .privacy-card {
  background-color: #141f18 !important;
  background-image: none;
}

/* Dark text written straight into the light theme */
:root[data-theme="dark"] .landing-inner .landing-section > section > p,
:root[data-theme="dark"] .landing-inner .landing-section > p,
:root[data-theme="dark"] .job-grid .job-card p:last-child,
:root[data-theme="dark"] .audience-product,
:root[data-theme="dark"] .task-state,
:root[data-theme="dark"] .audience-page .audience-note,
:root[data-theme="dark"] .audience-callout p,
:root[data-theme="dark"] .audience-type-pills span {
  color: #e3ebe5 !important;
}

/* Light borders */
:root[data-theme="dark"] .lp-social a,
:root[data-theme="dark"] .audience-journey-card,
:root[data-theme="dark"] .audience-type-pills span,
:root[data-theme="dark"] .audience-guide-list,
:root[data-theme="dark"] .audience-town-grid li,
:root[data-theme="dark"] .audience-explore-card,
:root[data-theme="dark"] .audience-page .gig-page article,
:root[data-theme="dark"] .privacy-card {
  border-color: #26342b !important;
}

:root[data-theme="dark"] .navbar, :root[data-theme="dark"] .navbar.scrolled { background: rgba(12,18,14,0.92) !important; }
:root[data-theme="dark"] a { color: inherit; }
:root[data-theme="dark"] .post-body a, :root[data-theme="dark"] .crumbs a { color: #6fd394; }
:root[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.92); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: #141f18; color: #eef3ef; border-color: #26342b; }

/* The theme switch in the navigation */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 6px;
  border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; }
.theme-toggle:hover { background: var(--surface); }
.theme-toggle svg { width: 17px; height: 17px; }

.theme-toggle-mobile { display: none; }
@media (max-width: 768px) {
  .theme-toggle-mobile { display: inline-flex; margin-left: auto; margin-right: 8px; }
}

/* Interactive demo (demo/styles.css has its own colour names) */
:root[data-theme="dark"] {
  --ink: #eef3ef; --ink-2: #c9d4cc; --ink-3: #9fb0a5; --ink-4: #7d8e83;
  --paper: #0c120e; --card: #141f18;
  --demo-pale: #3a2a10; --amber-pale: #3a2c0c; --red-pale: #3d1616; --grey-pale: #1b2620;
}
:root[data-theme="dark"] .demo-banner,
:root[data-theme="dark"] .cathy-msg.user .avatar { background: #1f2d24; color: #fff; }
:root[data-theme="dark"] .template-card button { background: #141f18; }
:root[data-theme="dark"] .map-legend { background: rgba(20,31,24,0.94); color: #eef3ef; }
:root[data-theme="dark"] .pill.green, :root[data-theme="dark"] .kpi.accent .v { color: #6fd394; }
:root[data-theme="dark"] .pill.amber { color: #f2c94c; }
:root[data-theme="dark"] .cathy-suggest-btn:hover { color: #6fd394; }
:root[data-theme="dark"] .lb-xp { color: #6fd394 !important; }

/* Pages and sections with their own light colours (blog, help, gigs, guides) */
:root[data-theme="dark"] .audience-bottom h2,
:root[data-theme="dark"] .audience-callout h2,
:root[data-theme="dark"] .audience-explore-card strong,
:root[data-theme="dark"] .audience-faq summary,
:root[data-theme="dark"] .audience-guide-list h3,
:root[data-theme="dark"] .audience-journey-card h3,
:root[data-theme="dark"] .audience-note strong,
:root[data-theme="dark"] .audience-town-grid strong,
:root[data-theme="dark"] .privacy-card-title,
:root[data-theme="dark"] .product-task strong,
:root[data-theme="dark"] .job-grid .job-card h3 a,
:root[data-theme="dark"] .landing-hero.landing-hero h1,
:root[data-theme="dark"] .landing-inner .landing-section h2,
:root[data-theme="dark"] .lp-nav a,
:root[data-theme="dark"] .blog-page h1,
:root[data-theme="dark"] .post-body h2,
:root[data-theme="dark"] .post-body h3,
:root[data-theme="dark"] .post-list h2 a,
:root[data-theme="dark"] .gig-page h1,
:root[data-theme="dark"] .gig-reqs h2,
:root[data-theme="dark"] .audience-guide h2,
:root[data-theme="dark"] .audience-guide h3,
:root[data-theme="dark"] .finance,
:root[data-theme="dark"] .research,
:root[data-theme="dark"] .gig-more-error { color: #eef3ef !important; }
:root[data-theme="dark"] .audience-guide-list li,
:root[data-theme="dark"] .audience-product,
:root[data-theme="dark"] .landing-inner .landing-section ol,
:root[data-theme="dark"] .post-body,
:root[data-theme="dark"] .post-list p,
:root[data-theme="dark"] .post-meta,
:root[data-theme="dark"] .gig-page .details,
:root[data-theme="dark"] .gig-reqs h3,
:root[data-theme="dark"] .gig-page article p,
:root[data-theme="dark"] .audience-guide p,
:root[data-theme="dark"] .audience-guide li { color: #c9d4cc !important; }
:root[data-theme="dark"] .post-cta,
:root[data-theme="dark"] .post-list li,
:root[data-theme="dark"] .gig-reqs,
:root[data-theme="dark"] .audience-guide,
:root[data-theme="dark"] .audience-towns,
:root[data-theme="dark"] .privacy-public,
:root[data-theme="dark"] .task-icon,
:root[data-theme="dark"] .task-icon.task-blue,
:root[data-theme="dark"] .finance,
:root[data-theme="dark"] .research,
:root[data-theme="dark"] .logistics,
:root[data-theme="dark"] .merchandising,
:root[data-theme="dark"] .sales,
:root[data-theme="dark"] .tech,
:root[data-theme="dark"] .technician,
:root[data-theme="dark"] .gig-hint-btn:hover,
:root[data-theme="dark"] .audience-page .audience-listings { background-color: #141f18 !important; border-color: #26342b !important; }
:root[data-theme="dark"] .gig-page .eyebrow { background: #12301f !important; color: #6fd394 !important; }
:root[data-theme="dark"] .post-cta a, :root[data-theme="dark"] .gig-page .button { color: #fff !important; }
:root[data-theme="dark"] .post-list h2 a:hover { color: #6fd394 !important; }

/* Found by a contrast check of every public page in dark mode */
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .feature-card h3,
:root[data-theme="dark"] .audience-feature-grid h3 { color: #eef3ef !important; }
:root[data-theme="dark"] .section-tag,
:root[data-theme="dark"] .nav-links a.active,
:root[data-theme="dark"] .journey-number,
:root[data-theme="dark"] .privacy-private,
:root[data-theme="dark"] .post-mock dd strong,
:root[data-theme="dark"] .pm-ok,
:root[data-theme="dark"] .post-mock .pick.on { color: #6fd394 !important; }
:root[data-theme="dark"] .privacy-public { color: #f2c94c !important; }
:root[data-theme="dark"] .privacy-col li,
:root[data-theme="dark"] .audience-journey-card p,
:root[data-theme="dark"] .audience-towns-more,
:root[data-theme="dark"] .audience-towns-more a,
:root[data-theme="dark"] .audience-explore-card span { color: #c9d4cc !important; }
:root[data-theme="dark"] .audience-toc { background: rgba(12,18,14,0.96) !important; border-color: #26342b !important; }
:root[data-theme="dark"] .audience-toc a { color: #c9d4cc !important; }
:root[data-theme="dark"] .audience-toc a:hover, :root[data-theme="dark"] .audience-toc a.active { color: #6fd394 !important; }
:root[data-theme="dark"] .map-label,
:root[data-theme="dark"] .mt-badge.green,
:root[data-theme="dark"] .mpesa-logo,
:root[data-theme="dark"] .mpesa-amount,
:root[data-theme="dark"] .step-num,
:root[data-theme="dark"] .wt-eg,
:root[data-theme="dark"] .gig-card .gig-cat,
:root[data-theme="dark"] .gig-pay strong,
:root[data-theme="dark"] .ci-label,
:root[data-theme="dark"] .pn-item.active,
:root[data-theme="dark"] .container > p > a,
:root[data-theme="dark"] .faq-list > div,
:root[data-theme="dark"] .product-label,
:root[data-theme="dark"] .docs .tag { color: #6fd394 !important; }
:root[data-theme="dark"] .mockup-example-tag,
:root[data-theme="dark"] .mt-badge.amber { color: #f2c94c !important; }
:root[data-theme="dark"] .chart-bars .cb span { color: #eef3ef !important; }
:root[data-theme="dark"] .legal-card,
:root[data-theme="dark"] .legal-note { background: #141f18 !important; border-color: #26342b !important; }
:root[data-theme="dark"] .legal-shell h1 { color: #eef3ef !important; }
:root[data-theme="dark"] .gig-more-cats,
:root[data-theme="dark"] .legal-note a,
:root[data-theme="dark"] .legal-shell a,
:root[data-theme="dark"] .legal-body a,
:root[data-theme="dark"] .docs a,
:root[data-theme="dark"] .audience-toc span { color: #6fd394 !important; }
:root[data-theme="dark"] .worker-chips span { color: #c9d4cc !important; }
:root[data-theme="dark"] .legal-nav,
:root[data-theme="dark"] .legal-body { background: #141f18 !important; border-color: #26342b !important; }
:root[data-theme="dark"] .legal-body h1,
:root[data-theme="dark"] .legal-body h2,
:root[data-theme="dark"] .legal-body h3 { color: #eef3ef !important; }
:root[data-theme="dark"] .legal-body p,
:root[data-theme="dark"] .legal-body li,
:root[data-theme="dark"] .legal-nav a { color: #c9d4cc !important; }
:root[data-theme="dark"] .legal-meta { color: #9fb0a5 !important; }

/* Gradient panels (the contrast check skipped gradients, so these stayed white) */
:root[data-theme="dark"] .audience-callout,
:root[data-theme="dark"] .audience-guide-list,
:root[data-theme="dark"] .audience-journey-card {
  background: linear-gradient(135deg, #16251b, #121c16 72%) !important;
  border-color: #26342b !important; box-shadow: none !important;
}
:root[data-theme="dark"] .audience-bottom { background: radial-gradient(ellipse at 50% 0, #17301f 0, #0c120e 65%) !important; }
:root[data-theme="dark"] .audience-callout h2,
:root[data-theme="dark"] .audience-bottom h2,
:root[data-theme="dark"] .audience-guide-list h3,
:root[data-theme="dark"] .audience-guide-list strong { color: #eef3ef !important; }
:root[data-theme="dark"] .audience-callout p,
:root[data-theme="dark"] .audience-bottom p,
:root[data-theme="dark"] .audience-guide-list li { color: #c9d4cc !important; }
:root[data-theme="dark"] .audience-callout > a { color: #6fd394 !important; }