/* VIPMarketing light/dark theme (2026-09-29). Light is the default and is untouched.
   Dark re-points the colour tokens and overrides the few hard-coded white/ink surfaces.
   The toggle button is injected by the theme script that seo_build.py appends to every page. */

/* ---------- toggle button ---------- */
.theme-tg{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;padding:0;margin:0 0 0 2px;border:0;border-radius:999px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule2);cursor:pointer;transition:background-color .2s ease}
.theme-tg svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-tg .i-sun{display:none}
.theme-tg:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media(hover:hover){.theme-tg:hover{background:var(--mist)}}
/* phone width: keep the blog header on one line (brand + Insights + CTA + toggle) */
@media(max-width:700px){.blog-nav{gap:10px}.blog-nav .theme-tg{width:34px;height:34px}.blog-nav .nav-cta{padding:9px 12px}}

/* ---------- dark tokens ---------- */
html[data-theme="dark"]{
 color-scheme:dark;
 --paper:#0A1222;--mist:#0F1A2F;--mist2:#14223B;
 --navy:#8DB0F0;--navy2:#A9C3F5;--ink:#EAF0FA;--ink2:#BAC6DC;--mute:#8F9DB7;--faint:#6D7B96;
 --rule:rgba(255,255,255,.12);--rule2:rgba(255,255,255,.24);
 --blue:#5B8BD9;--teal:#2DBBA9;--amber:#E7B457;--coral:#F27B66;
 --teal-ink:#4FD1BF;--amber-ink:#F0BF6B;--coral-ink:#FF9483;--blue-ink:#8DB0F0;
 --warm:#12203A;--tealbg:#0E2B2C;--amberbg:#2B2413;--coralbg:#2E1A1A;
 --surf:#111D35;--btn:#2F5DA8;--btn-hi:#3F70C0;--deep:#0D1F45;--deeper:#060B16;
 --lift:0 1px 0 rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}
html[data-theme="dark"] .theme-tg .i-sun{display:block}
html[data-theme="dark"] .theme-tg .i-moon{display:none}

/* ---------- dark: surfaces that were hard-coded white ---------- */
html[data-theme="dark"] .hero-fig:after,
html[data-theme="dark"] .console,
html[data-theme="dark"] .stage .top,
html[data-theme="dark"] .ticker,
html[data-theme="dark"] .col.hot,
html[data-theme="dark"] .card,
html[data-theme="dark"] .capture,
html[data-theme="dark"] .chart,
html[data-theme="dark"] .contact-form-wrap,
html[data-theme="dark"] .ff input,
html[data-theme="dark"] .ff select,
html[data-theme="dark"] .ff textarea,
html[data-theme="dark"] .mpanel,
html[data-theme="dark"] nav.open,
html[data-theme="dark"] .search input,
html[data-theme="dark"] .chip{background:var(--surf)}
html[data-theme="dark"] .col.hot{background:color-mix(in srgb,var(--sc) 14%,var(--surf))}
html[data-theme="dark"] nav.solid,
html[data-theme="dark"] .lp #nav,
html[data-theme="dark"] .site-header{background:rgba(10,18,34,.94);box-shadow:0 1px 0 var(--rule)}
html[data-theme="dark"] .calc input::-webkit-slider-thumb{background:var(--surf)}
html[data-theme="dark"] .calc input::-moz-range-thumb{background:var(--surf)}
html[data-theme="dark"] #tip{background:#1B2A47;color:#EAF0FA}

/* ---------- dark: ink-coloured blocks stay dark, buttons stay readable ---------- */
html[data-theme="dark"] .close{background:var(--deep)}
html[data-theme="dark"] footer,
html[data-theme="dark"] .site-footer{background:var(--deeper)}
html[data-theme="dark"] .post-cta{background:var(--deep)}
html[data-theme="dark"] .btn,
html[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--btn);color:#fff}
html[data-theme="dark"] .btn.ghost{background:transparent;color:var(--ink)}
html[data-theme="dark"] .btn.ghost.inv{background:transparent;color:#fff}
html[data-theme="dark"] .close .btn,
html[data-theme="dark"] .post-cta-btn{background:#EAF0FA;color:#0A1222}
@media(hover:hover){
 html[data-theme="dark"] .btn:hover{background:var(--btn-hi)}
 html[data-theme="dark"] .btn.ghost:hover{background:var(--mist)}
 html[data-theme="dark"] .close .btn:hover{background:#fff}
}

/* ---------- dark: inline SVG graphics keep their hard-coded light-theme colours ---------- */
html[data-theme="dark"] svg rect[fill="#0B1F44"][height="24"]{fill:var(--btn)}
html[data-theme="dark"] svg path[fill="#fff"]{fill:var(--surf)}
html[data-theme="dark"] svg rect[fill="#fff"],
html[data-theme="dark"] svg circle[fill="#fff"]{fill:var(--surf)}
html[data-theme="dark"] svg [stroke="#fff"]{stroke:var(--surf)}
html[data-theme="dark"] svg [fill="#DDE5F3"]{fill:#1C2A47}
html[data-theme="dark"] svg [fill="#F4F7FC"]{fill:var(--mist)}
html[data-theme="dark"] svg [fill="#0B1F44"]{fill:#EAF0FA}
html[data-theme="dark"] svg [stroke="#0B1F44"]{stroke:#EAF0FA}
html[data-theme="dark"] svg [fill="#33425F"]{fill:#BAC6DC}
html[data-theme="dark"] svg [fill="#5E6E8C"]{fill:#8F9DB7}
html[data-theme="dark"] svg [fill="#8B98B1"]{fill:#6D7B96}
html[data-theme="dark"] svg [fill="#123A7A"]{fill:#8DB0F0}
html[data-theme="dark"] svg [stroke="#123A7A"]{stroke:#8DB0F0}
html[data-theme="dark"] svg [fill="#14756A"]{fill:#4FD1BF}

/* ---------- dark: blog article body copy was a hard-coded dark navy ---------- */
html[data-theme="dark"] .article-wrap p,
html[data-theme="dark"] .article-wrap ul,
html[data-theme="dark"] .article-wrap ol{color:var(--ink2)}