/* ===========================================================
   iTumbuh light / dark theme (public pages + sign-in pages).
   Dark mode is opt-in per page: only pages that load assets/theme.js
   ever get <html data-theme="dark">, so the dashboards and reports that
   share tokens.css are never touched by the rules below.

   Approach
   - Tokens first: the page, text, border and "ink" colours flip in one
     place, and everything already written with var(--…) follows.
   - Then every colour that was typed straight into a stylesheet (white
     cards, grey body text, pastel badges) gets its dark counterpart.
   - Brand blocks keep their colours: the blue banners, the coloured
     quick bar, the amber CTA and the tiles look the same in both themes.
   - Charts and app mock-ups (homepage growth chart, WHO chart, Features
     phone shots) stay light, like a printed chart on a dark desk: their
     pastel zones and dark labels are drawn into the graphics themselves.
   =========================================================== */

/* ---------- The switch (both themes) ---------- */
.theme-toggle{
  position:relative;flex-shrink:0;width:40px;height:40px;border:0;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--muted);color: var(--primary-ink);
  transition:background-color .2s ease, color .2s ease, transform .15s ease;
}
.theme-toggle:hover{background:var(--muted-2);}
.theme-toggle:active{transform:scale(.9);}
.theme-toggle:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);}
.theme-toggle svg{position:absolute;width:19px;height:19px;transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;}
.theme-toggle .tt-sun{opacity:0;transform:rotate(-90deg) scale(.3);}
:root[data-theme="dark"] .theme-toggle .tt-sun{opacity:1;transform:none;color:#FCD34D;}
:root[data-theme="dark"] .theme-toggle .tt-moon{opacity:0;transform:rotate(90deg) scale(.3);}
/* On the sign-in pages the top bar spreads its items apart; keep the
   switch beside BM | EN rather than floating in the middle. */
.auth-topbar .theme-toggle,.intro-topbar .theme-toggle{margin-left:auto;margin-right:10px;}
/* Onboarding's bar also has "Skip" on the far right: keep the switch and
   BM | EN together in the middle, where BM | EN always sat. */
.intro-topbar .theme-toggle + .lang-switch:not(:last-child){margin-right:auto;}
@media (max-width:480px){
  .theme-toggle{width:36px;height:36px;}
  .nav-right{gap:8px;}
}

/* Colours ease across for a moment when the switch is pressed. */
:root.theme-switching,:root.theme-switching *,:root.theme-switching *::before,:root.theme-switching *::after{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important;
}

/* ---------- Dark tokens ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1120;
  --card:#141D33;
  --fg:#E5E7EB;
  --fg-soft:#CBD5E1;
  --fg-muted:#94A3B8;          /* 7.4:1 on --bg, 6.2:1 on --card */
  --muted:#111A2E;
  --muted-2:#1E2A45;
  --border:#22304D;
  --border-strong:#2E3D5E;
  --border-interactive:#64748B;
  --primary-ink:#93C5FD;       /* blue text on dark: 10.2:1 on --bg */
  --secondary-ink:#6EE7B7;
  --accent-ink:#FCD34D;
  --danger-ink:#FCA5A5;
  --tint-primary:rgba(59,130,246,.14);
  --tint-secondary:rgba(16,185,129,.14);
  --tint-accent:rgba(245,158,11,.14);
  --tint-danger:rgba(239,68,68,.14);
}

/* ---------- Surfaces: white cards become dark slate ---------- */
:root[data-theme="dark"] :is(
  .help-panel,.helpbar .help-results,.dropdown-menu,.ind-card,.ztable-wrap,.chip,.article-card,
  .contact-card,.info-card,.team-card,.video-card,.stat-block,.why-badge,.why-card,.qc-card,
  .sc-viewport,.sc-arrow,.hub-card,.modal-box
){background:var(--card);}
:root[data-theme="dark"] :is(.stat-block,.why-badge,.sc-viewport,.help-panel,.hub-card){border:1px solid var(--border);}
:root[data-theme="dark"] :is(.navbar,.mobile-menu){background:#0E1628;border-color:var(--border);}
:root[data-theme="dark"] .navbar.is-scrolled{box-shadow:0 8px 24px rgba(0,0,0,.45);}
:root[data-theme="dark"] .quick-actions{background:var(--bg);border-color:var(--border);}
:root[data-theme="dark"] .qcheck{background:#0E1628;}
:root[data-theme="dark"] .auth-form-side{background:var(--bg);}
:root[data-theme="dark"] footer{border-top:1px solid var(--border);}
:root[data-theme="dark"] .media{background-color:#1B2540;}
:root[data-theme="dark"] :is(.icon-circle,.check-row input[type="checkbox"]){background:var(--muted-2);}
:root[data-theme="dark"] :is(.field input:focus,.field select:focus,.field textarea:focus,.help-search:focus){background:var(--muted-2);}
:root[data-theme="dark"] :is(input:hover,input:focus,.icon-btn-inline:hover){background:var(--muted-2);}
:root[data-theme="dark"] input.invalid{background:rgba(239,68,68,.12);}
:root[data-theme="dark"] .sc-dot:hover{background:#475569;}
:root[data-theme="dark"] :is(.help-panel,.helpbar .help-results,.dropdown-menu,.why-badge){box-shadow:0 18px 44px rgba(0,0,0,.5);}

/* ---------- Body text: the two hard-coded greys ---------- */
:root[data-theme="dark"] :is(
  .mobile-menu a.mmenu-sub,.mgroup-items a,.zlegend span,.ind-card p,table.ztable thead th,.chip,
  .article-card p,.notice p,.contact-row span,.contact-row a,.split-text > p,.section-head p,
  .feature-card p,.info-card p,.info-card li,.video-card-body p,.faq-a p,.auth-card .sub,
  .check-row label,.modal-box p,.stat-block .lbl,.why-badge .cap,.why-head p,.why-card span,
  .help-quick a,.qc-seg button,.qc-tip,.qc-empty li,.sc-desc,.v-caption p,.v-item p,.hub-card p,
  .no-access-note p
){color:var(--fg-muted);}
:root[data-theme="dark"] :is(table.ztable td,.split-list li,.method-block p,.qc-weight,.qc-advice){color:var(--fg-soft);}
:root[data-theme="dark"] [style*="color:#4B5563"]{color:var(--fg-muted) !important;}
:root[data-theme="dark"] .qc-seg button:hover{color:var(--fg);}
/* The grey above must not flatten the blue hover / selected states. */
:root[data-theme="dark"] :is(.help-quick a:hover,.contact-row a:hover,.mgroup-items a:hover,.chip:hover,.qc-seg button[aria-checked="true"]){color:var(--primary-ink);}

/* ---------- Pastel badges and icon tiles: tinted glass + light text ---------- */
:root[data-theme="dark"] :is(.article-cat,.article-cat.cat-growth,.contact-ic,.why-ic.c1,.qc-empty-ic,.qc-s-tall,
  .h-who .hub-ic,.help-quick a:hover,.info-card .icon-circle,.auth-card .eyebrow-tag,.qc-tip,.feature-card.tint-blue){
  background:rgba(59,130,246,.16);
}
:root[data-theme="dark"] .feature-card.tint-blue:hover{background:rgba(59,130,246,.24);}
:root[data-theme="dark"] :is(.article-cat,.article-cat.cat-growth,.qc-s-tall){color:#93C5FD;}
:root[data-theme="dark"] :is(.article-cat.cat-nutrition,.zpill.low,.form-result.ok,.why-ic.c2,.qc-s-normal,.h-tip .hub-ic,
  .role-badge,.success-box,.feature-card.tint-green){
  background:rgba(16,185,129,.15);
}
:root[data-theme="dark"] .feature-card.tint-green:hover{background:rgba(16,185,129,.22);}
:root[data-theme="dark"] :is(.article-cat.cat-nutrition,.zpill.low,.form-result.ok,.qc-s-normal,.role-badge span,.success-box){color:#6EE7B7;}
:root[data-theme="dark"] .success-box{border-color:rgba(110,231,183,.35);}
:root[data-theme="dark"] :is(.article-cat.cat-care,.zpill.med,.why-ic.c3,.qc-s-risk,.h-faq .hub-ic,.dev-note,.feature-card.tint-amber){
  background:rgba(245,158,11,.15);
}
:root[data-theme="dark"] .feature-card.tint-amber:hover{background:rgba(245,158,11,.22);}
:root[data-theme="dark"] :is(.article-cat.cat-care,.zpill.med,.qc-s-risk,.dev-note){color:#FCD34D;}
:root[data-theme="dark"] .dev-note{border-color:rgba(252,211,77,.3);}
:root[data-theme="dark"] .dev-note a{color:#FDE68A;}
:root[data-theme="dark"] :is(.zpill.high,.form-result.err,.qc-err,.qc-s-stunted,.h-vid .hub-ic,.form-alert){
  background:rgba(239,68,68,.15);
}
:root[data-theme="dark"] :is(.zpill.high,.form-result.err,.qc-err,.qc-s-stunted,.h-vid .hub-ic,.h-vid .hub-go,.form-alert){color:#FCA5A5;}
:root[data-theme="dark"] .why-ic.c4{background:rgba(139,92,246,.18);color:#C4B5FD;}

/* ---------- Buttons ---------- */
/* White buttons stay white (they sit on the blue banners), so their text
   keeps the dark blue it was designed with, not the lighter dark-mode ink. */
:root[data-theme="dark"] :is(.btn-white,.hero .btn-outline:hover,.btn-primary.on-dark:hover){color:#1D4ED8;}
/* The sign-in and welcome pages hover their filled button to the "blue
   text" token, which dark mode makes LIGHT blue: white on light blue was
   unreadable. Hover to a deeper blue instead (white on #1D4ED8 = 6.7:1).
   Their outline buttons fill blue on hover, so their text stays white. */
:root[data-theme="dark"] .btn-primary:not(.on-amber):hover{background:#1D4ED8;color:#fff;}
/* White buttons hover to the page's muted ground, which dark mode makes
   navy: keep them light instead (#1D4ED8 on #DBEAFE = 5.6:1). */
:root[data-theme="dark"] .btn-white:hover{background:#DBEAFE;}
:root[data-theme="dark"] :is(.auth-shell,.intro-card) .btn-outline:hover{background:var(--primary-dark);color:#fff;}
:root[data-theme="dark"] .btn-outline-dark{border-color:#CBD5E1;color:#E5E7EB;}
:root[data-theme="dark"] .btn-outline-dark:hover{background:#E5E7EB;color:#0B1120;}
/* ...except on the amber CTA, where the dark outline is still right. */
:root[data-theme="dark"] .cta .btn-outline-dark{border-color:var(--dark-2);color:var(--dark-2);}
:root[data-theme="dark"] .cta .btn-outline-dark:hover{background:var(--dark-2);color:#fff;}
:root[data-theme="dark"] :is(.faq-item,.faq-item:first-child){border-color:#334155;}

/* ---------- Growth Check details ---------- */
:root[data-theme="dark"] .qc-seg::before{background:#27365A;box-shadow:0 2px 8px rgba(0,0,0,.35);}
:root[data-theme="dark"] .qc-pin b{background:#E5E7EB;color:#0B1120;}
:root[data-theme="dark"] .qc-pin i{background:var(--card);border-color:#E5E7EB;}

/* ---------- Light islands: charts and app mock-ups keep their light look ---------- */
:root[data-theme="dark"] :is(.chart-card,.zchart-card,.shot){
  --bg:#FFFFFF;--fg:#111827;--fg-soft:#374151;--fg-muted:#4B5563;--muted:#F3F4F6;--muted-2:#E5E7EB;
  --border:#E5E7EB;--primary-ink:#1D4ED8;--secondary-ink:#047857;--accent-ink:#B45309;--danger-ink:#B91C1C;
  background:#fff;color:#111827;
}
:root[data-theme="dark"] .zchart-card .zlegend span{color:#4B5563;}

/* ---------- Splash, onboarding and welcome (assets/onboarding.css) ----------
   These pages never set a page background (they relied on the browser's
   white), so dark mode supplies one. The coloured left panel of each
   onboarding slide and the blue splash screen keep their brand colours. */
:root[data-theme="dark"] body{background:var(--bg);}
:root[data-theme="dark"] .intro-card:not(.splash-card){background:var(--bg);}
:root[data-theme="dark"] :is(.ob-slide p,.welcome-tag){color:var(--fg-muted);}
:root[data-theme="dark"] .ob-dot:not(.active){background:#334155;}