/*
 * NSEMM dark mode (handle: nsemm-theme-dark).
 *
 * A PURPOSE-BUILT dark palette derived from Midnight + Foundational Brown, NOT a
 * generic invert. The whole theme reads its colours through a small set of local
 * aliases (--blue/--gold/--teal/--brown/--sandy/--midnight/--bg) plus the new
 * surface/ink/hairline/link tokens added to the global :root in theme.css. About
 * 90% of every stylesheet consumes those aliases, so dark mode is mostly a matter
 * of REDEFINING the aliases (and the new tokens) under the dark selectors. The
 * remainder is a short list of literal-hex hold-outs and theme.json element-level
 * colours that must be patched by selector, plus two scoped exceptions where an
 * alias is used against its semantic role (the always-dark footer surface and the
 * always-vivid teal hero).
 *
 * SCOPING / LIGHT-MODE SAFETY
 *   - Every rule here is gated behind html[data-theme="dark"] OR, for the system
 *     default, @media (prefers-color-scheme: dark) with :root:not([data-theme="light"]).
 *   - With NO data-theme attribute on a light OS, nothing here matches, so light
 *     mode is byte-identical. The only edit to an existing light file is the
 *     additive (unused-in-light) token block in theme.css :root.
 *   - This file is render-blocking (enqueued like theme.css) so the dark palette
 *     is present before first paint — no flash.
 *
 * WCAG (ratios vs their own surface, script-verified): Sandy ink 14.82 / 13.54 /
 * 11.87; muted 9.94 / 9.08; gold 11.53 / 10.53; teal 13.00; blue-button white
 * 6.62; link 7.17 / 6.55; breadcrumb 8.11; hero heading-on-teal 8.15. All AA,
 * most AAA.
 *
 * University Blue serves THREE roles and must NOT collapse to one value:
 *   - button / pill SURFACE that carries white text  -> #345C9E (white 6.62)
 *   - heading colour on dark cards                    -> #345C9E
 *   - link / accent text on dark cards                -> #7FA8E0 (7.17 / 6.55)
 * We set the --blue alias to the button/heading mid-tone (#345C9E) and route the
 * link role through the dedicated --link token (#7FA8E0).
 */

/* == ALIAS + TOKEN REDEFINITION ============================================
   The single change that recolours ~90% of the site. Brand-Sync only ever
   rewrites the wp--preset--color--* properties (light hub colours); these local
   aliases sit downstream of those presets, so overriding them here cannot fight
   Brand-Sync — light keeps tracking the hub, dark uses these derived constants. */
html[data-theme="dark"] {
	/* Brand aliases */
	--blue: #345C9E;     /* lightened University Blue: white-text button + heading */
	--gold: #FACD00;     /* keystone, unchanged (11.53 / 10.53 on dark) */
	--teal: #00FACD;     /* keystone, unchanged (13.00) */
	--brown: #C9C2B8;    /* Foundational Brown is a TEXT colour -> light tone (9.94) */
	--sandy: #2E2B29;    /* Sandy is a SURFACE here -> layered dark sandy (ink 11.87) */
	--midnight: #F1EBE3; /* Midnight is a TEXT colour -> Sandy ink (14.82 / 13.54) */
	--bg: #1A1918;       /* base canvas */

	/* New surface / ink / hairline / link tokens */
	--surface-card: #232120;
	--surface-raised: #34302D;
	--surface-sunken: #14110F;
	--ink: #F1EBE3;
	--ink-muted: #C9C2B8;
	--hairline: rgba(255, 255, 255, 0.09);
	--link: #7FA8E0;
	/* Blue-as-TEXT on dark surfaces (headings, stat numbers, eyebrows). The --blue
	   alias (#345C9E) is the button/chip SURFACE tone (white 6.62) and is NOT legible
	   as text on the dark canvas (2.65) or dark cards (2.12). Route every blue-text
	   role through this lighter heading ink instead: 7.17 on the canvas, ~6.3 on the
	   #2E2B29 / #232120 cards — both clear AA, most AAA. */
	--heading-ink: #7FA8E0;

	/* University-Blue channels for the frosted rgba() glass in site-chrome:
	   28 59 112 -> 52 92 158 so the cookie/FAB glass tracks the lightened blue. */
	--blue-rgb: 52, 92, 158;

	/* Document background + default ink so any unstyled gap reads dark, never a
	   white flash between full-bleed sections. */
	color-scheme: dark;
}

/* == DOCUMENT SURFACE ====================================================== */
html[data-theme="dark"] body {
	background: var(--bg);
	color: var(--ink);
}

/* == theme.json ELEMENT-LEVEL COLOURS ======================================
   theme.json itself is NOT edited (it drives the editor + the preset map). The
   front-end element colours it set as wp--preset--color references are repainted
   here at the element level so prose, links, headings, the post title and the two
   group block-style variations land on the dark palette. */
/* Content/prose links flip to the lightened link tone. */
html[data-theme="dark"] a {
	color: var(--link);
}
html[data-theme="dark"] a:hover {
	color: color-mix(in srgb, var(--link) 70%, #fff);
}
/* The site HEADER is a keystone surface that looks the SAME in both modes: a blue
   utility bar, a gold main bar that morphs to a literal-#fff floating bar on scroll.
   The generic dark `a` rule (0,1,1) repaints its links to the page link tone, which
   lands light-blue on gold (1.6), on blue (2.7) and recolours the blue/white CTAs.
   Re-assert the header's own light-mode link colours at higher specificity, scoped
   to .hdr-wrap / .util:
     - util bar (blue, stays blue): keep white-80% links;
     - main GOLD bar: nav links + logo use --brown, which flips light in dark, so
       pin them to the canonical dark brown #443800 (legible on gold);
     - SCROLLED white bar (.header.light, literal #fff): nav links/logo are --blue
       (#345C9E) on white = AA, so leave them;
     - the blue "Find a Tutor" pill keeps white; the ghost "Support Us" .btn-o on
       gold pins to dark brown. */
html[data-theme="dark"] .util .util-nav a {
	color: color-mix(in srgb, #fff 80%, transparent);
}
html[data-theme="dark"] .util .util-nav a:hover {
	color: #fff;
}
html[data-theme="dark"] .hdr-wrap header .ni > a,
html[data-theme="dark"] .hdr-wrap .logo-text {
	color: #443800;
}
html[data-theme="dark"] .hdr-wrap header.light .ni > a,
html[data-theme="dark"] .hdr-wrap header.light .logo-text {
	color: var(--blue);
}
html[data-theme="dark"] .hdr-wrap .btn-p {
	color: #fff;
}
html[data-theme="dark"] .hdr-wrap .btn-o {
	color: #443800;
}
/* MOBILE DRAWER (.mob-*): the drawer panel surface is var(--bg) (dark) with
   var(--sandy) hover/open rows (dark). Its accordion buttons, sub-links and simple
   links are color:var(--blue) (#345C9E = 2.65 on the dark panel — fail). Route them
   through the readable heading ink. The drawer logo badge is --brown on gold, which
   flips light (1.16) — pin to dark brown. The aria-current pills are white-on-blue
   surfaces and stay as-is. */
html[data-theme="dark"] .mob-acc-btn,
html[data-theme="dark"] .mob-acc-drop a,
html[data-theme="dark"] .mob-acc.active > .mob-acc-btn,
html[data-theme="dark"] .mob-link {
	color: var(--heading-ink);
}
html[data-theme="dark"] .mob-acc-drop a[aria-current="page"],
html[data-theme="dark"] .mob-link[aria-current="page"] {
	color: #fff;
}
html[data-theme="dark"] .mob-logo-badge {
	color: #443800;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .wp-block-post-title {
	color: var(--heading-ink);
}
/* Block stylesheets paint several blue-TEXT roles with a literal var(--blue)
   (stat numbers, section eyebrows, service-card headings, the impact eyebrow +
   "Our story" h2). The h1–h6 rule above only reaches semantic headings, so pin
   the remaining blue-text spots to the readable heading ink too. These are TEXT,
   not surfaces, so the lighter tone is correct; the gold-on-blue chips, the CTA
   band and the buttons keep --blue (they are blue SURFACES). */
html[data-theme="dark"] .nsemm-stat-counter .sn,
html[data-theme="dark"] .nsemm-stat-counter .sn-count,
html[data-theme="dark"] .nsemm-services .eyebrow,
html[data-theme="dark"] .nsemm-services .sec-h,
html[data-theme="dark"] .nsemm-services .svc h3,
html[data-theme="dark"] .nsemm-impact .impact h2,
html[data-theme="dark"] .nsemm-impact .impact .eyebrow,
html[data-theme="dark"] .nsemm-accordion .acc-btn {
	color: var(--heading-ink);
}
/* The service-card "Learn more" link is a core button with NO background in the
   block CSS (a flat text link). The generic dark button rule above fills any
   bare .wp-block-button__link with the blue SURFACE, which would put light-blue
   heading ink on a mid-blue fill (2.71). Restore its transparent background so it
   stays a flat link and pin the label to the readable heading ink (5.74 on card). */
html[data-theme="dark"] .nsemm-services .svc-link .wp-block-button__link {
	background-color: transparent;
	color: var(--heading-ink);
}
/* The two core/group variations registered in theme.json. White-card becomes a
   raised dark card; sandy-panel becomes the layered dark sandy surface. Their
   theme.json text colour was University Blue; on the dark card it must read as the
   lightened blue heading tone. */
html[data-theme="dark"] .wp-block-group.is-style-white-card {
	background-color: var(--surface-card);
	color: var(--ink);
}
html[data-theme="dark"] .wp-block-group.is-style-sandy-panel {
	background-color: var(--sandy);
	color: var(--ink);
}
/* Core button element (theme.json button): blue surface + white text already
   tracks the lightened --blue alias via the preset, but the preset value is the
   light hub blue, so repaint the element explicitly to the dark button tone. */
html[data-theme="dark"] .wp-block-button__link:not(.has-background) {
	background-color: var(--blue);
	color: #fff;
}

/* == INTERIOR CANVAS / PROSE (theme.css) ===================================
   .nsemm-prose-card uses is-style-white-card (handled above). Pin the soft
   shadow tint to a darker mix so it reads on the dark canvas. Breadcrumb +
   page-title already track --blue / --midnight aliases (flip automatically); the
   page-title stays the lightened blue, which is correct on the dark sandy canvas. */
html[data-theme="dark"] .nsemm-prose-card {
	box-shadow: 0 4px 20px color-mix(in srgb, #000 35%, transparent);
}
/* Topic-page white-on-sandy treatment (theme.css): the .svc / .impact cards are
   forced to var(--bg) (now dark) on the dark sandy canvas, and the one-off near
   white #FAF7F2 hover must become the raised dark tone, not flash bright. */
html[data-theme="dark"] .nsemm-topic .nsemm-services .svc:hover,
html[data-theme="dark"] .nsemm-topic .nsemm-topic-hub .svc:hover {
	background: var(--surface-raised);
}

/* == LITERAL-HEX HOLD-OUTS (block stylesheets) =============================
   These few declarations were baked as literal hex in the block CSS and so do
   NOT track the aliases. Patch each to its dark equivalent. */

/* impact: the "Read our story" button hover #152d55 (blue darkened) -> blue mixed
   75% black on the lightened blue; the image-placeholder caption #aaa -> muted. */
html[data-theme="dark"] .nsemm-impact .impact .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--blue) 75%, #000);
}
html[data-theme="dark"] .nsemm-impact .impact .impact-img {
	color: var(--ink-muted);
}

/* services-grid: card hover #EDE4D8 -> raised dark tone. */
html[data-theme="dark"] .nsemm-services .svc:hover {
	background: var(--surface-raised);
}

/* topic-hub: card hover #FAF7F2 -> raised dark tone. */
html[data-theme="dark"] .nsemm-topic-hub .svc:hover {
	background: var(--surface-raised);
}

/* site-header: blue hover #152d55 (button, hamburger, active drawer rows) ->
   blue mixed 75% black on the lightened blue. */
html[data-theme="dark"] .btn-p:hover,
html[data-theme="dark"] .hamburger:hover,
html[data-theme="dark"] .mob-ctas .btn-hl:hover,
html[data-theme="dark"] .mob-acc-drop a[aria-current="page"]:hover,
html[data-theme="dark"] .mob-link[aria-current="page"]:hover {
	background: color-mix(in srgb, var(--blue) 75%, #000);
}

/* == CTA BAND (cta) ========================================================
   The blue band stays blue (lightened via --blue), so its text must stay white.
   The band text uses var(--bg) (which is now dark) for the heading, the ghost
   button label and its border — repaint those back to white so the band reads
   white-on-blue exactly as in light mode. */
html[data-theme="dark"] .nsemm-cta .cta-band h2 {
	color: #fff;
}
html[data-theme="dark"] .nsemm-cta .cta-band p {
	color: color-mix(in srgb, #fff 72%, transparent);
}
html[data-theme="dark"] .nsemm-cta .cta-band .wp-block-button.btn-co .wp-block-button__link {
	color: #fff;
	border-color: color-mix(in srgb, #fff 35%, transparent);
}
html[data-theme="dark"] .nsemm-cta .cta-band .wp-block-button.btn-co .wp-block-button__link:hover {
	color: #fff;
	border-color: #fff;
	background: color-mix(in srgb, #fff 8%, transparent);
}

/* == GOLD BUTTONS (.btn-hs secondary + .btn-cg CTA primary) ================
   Every gold pill paints its label with color:var(--brown). --gold stays a bright
   SURFACE in dark but --brown flips to a LIGHT text tone (#C9C2B8), so the label
   would be light-brown on gold (1.16 — illegible). Pin each gold-pill label to the
   dark Foundational Brown (#443800), the canonical on-gold pairing (7.62), exactly
   as the feature-panel gold button below already does. Each gold-button selector
   in the source carries its own (high) specificity — the hero scopes its pill with
   .nsemm-home .hero, the header drawer with .mob-ctas, the CTA band with
   .nsemm-cta .cta-band — so we mirror those scopes here to actually win the
   cascade rather than rely on the bare .btn-hs selector. The blue PRIMARY pill
   (.btn-hl) needs no patch: white-on-blue tracks the lightened --blue surface. */
html[data-theme="dark"] .btn-hs .wp-block-button__link,
html[data-theme="dark"] .nsemm-home .hero .btn-hs .wp-block-button__link,
html[data-theme="dark"] .mob-ctas .btn-hs,
html[data-theme="dark"] a.btn-hs,
html[data-theme="dark"] .nsemm-cta .cta-band .wp-block-button.btn-cg .wp-block-button__link {
	color: #443800;
}
/* The gold pill links (.btn-hs/.btn-cg/.fp-btn as core/button children) match the
   generic dark rule `.wp-block-button__link:not(.has-background)` which fills them
   with the BLUE surface (equal specificity, dark.css wins by load order) — turning
   the gold pill into a blue pill with dark-brown text (1.75). Restore the gold
   surface so they stay gold pills. */
html[data-theme="dark"] .btn-hs .wp-block-button__link,
html[data-theme="dark"] .nsemm-cta .cta-band .wp-block-button.btn-cg .wp-block-button__link,
html[data-theme="dark"] .nsemm-feature-panel .fp-btn .wp-block-button__link {
	background-color: var(--gold);
}
/* Feature-panel TITLE (.fp-title) is color:var(--blue) TEXT on the dark card —
   route it through the readable heading ink like the other headings. (The .fp-btn
   label colour + dark hover are handled in the FEATURE-PANEL section below.) */
html[data-theme="dark"] .nsemm-feature-panel .fp-title.wp-block-heading {
	color: var(--heading-ink);
}
/* site-chrome gold accents that carry --brown on a gold surface: the cookie
   "Accept All" button, the share-FAB hover icon stroke and the "Copied!" tooltip.
   Same flip problem (light-brown on gold = 1.16) — pin them to dark brown. */
html[data-theme="dark"] .nsemm-site-chrome .ck-accept,
html[data-theme="dark"] .nsemm-site-chrome .share-ico.copied::after {
	color: #443800;
}
html[data-theme="dark"] .nsemm-site-chrome .share-ico:hover svg {
	stroke: #443800;
}

/* == FEATURE-PANEL (feature-panel) =========================================
   .fp-card / .fp-band surfaces flip automatically (var(--bg) / var(--sandy)).
   The gold CTA carries blue text; on dark, keep the gold-button text the dark
   Foundational Brown (443800) for the canonical gold pairing (7.62) rather than
   the lightened blue. Its hover paints a --brown SURFACE (now light) with
   var(--bg) (now dark) text: pin a dark hover surface + white text so the hover
   stays a dark pill, not a light one. */
html[data-theme="dark"] .nsemm-feature-panel .fp-btn .wp-block-button__link {
	color: #443800;
}
html[data-theme="dark"] .nsemm-feature-panel .fp-btn .wp-block-button__link:hover {
	background: var(--surface-raised);
	color: #fff;
}

/* == HERO (hero) ===========================================================
   Darkened (not kept vivid): the hero surface becomes a deep teal-tinted dark
   slab derived from Discovery Teal, so the brand hue survives but the surface
   is genuinely dark like the rest of the page. Heading routes through the
   shared --heading-ink (light blue, 7.2:1+ on dark surfaces elsewhere); the
   emphasised word stays Knowledge Gold as a vivid accent (10.5:1 on the dark
   teal). .btn-hl (blue) and .btn-hs (gold, already patched above) need no
   further change — both already track the dark-mode button rules. */
html[data-theme="dark"] .nsemm-home .hero {
	background: color-mix(in srgb, var(--teal) 18%, #0B1F1B);
}
html[data-theme="dark"] .nsemm-home .hero .wp-block-heading {
	color: var(--heading-ink);
}
html[data-theme="dark"] .nsemm-home .hero .wp-block-heading em {
	color: var(--gold);
}
html[data-theme="dark"] .nsemm-home .hero p {
	color: var(--ink);
}
/* Hero image frame: on the now-dark slab, use a light-tint frame (matching the
   rest of the dark theme's raised-surface treatment) instead of the
   light-mode black-tint frame, which would read as a hole in the dark hero. */
html[data-theme="dark"] .nsemm-home .hero .hero-img {
	background: color-mix(in srgb, #fff 6%, transparent);
	color: var(--ink-muted);
}

/* == FOOTER (footer-starfield + site-footer) ===============================
   The footer is ALREADY a dark island: footer.nsemm-site-footer uses var(--midnight)
   as its SURFACE (not text). Because --midnight flips to a light text tone, the
   footer surface would otherwise turn light. Re-pin the footer's local aliases to
   their LIGHT values inside the footer scope so the entire footer — shell,
   newsletter glass, contact-copy white text, accreditation white badge frames,
   footer-credit muted text — stays byte-identical to today's dark footer. Only
   the toggle control (added by this theme) needs its own dark styling, handled in
   the footer block stylesheet. */
html[data-theme="dark"] .nsemm-site-footer,
html[data-theme="dark"] footer.nsemm-site-footer {
	--bg: #FFFFFF;
	--sandy: #F1EBE3;
	--midnight: #2B2A2A;
	--brown: #443800;
	--blue: #1C3B70;
	--link: #7FA8E0;
}

/* == BLOCK CARD SHADOWS =====================================================
   Block stylesheets compute their drop-shadows with color-mix(in srgb,
   var(--midnight) N%, transparent). In light mode --midnight is #2B2A2A
   (near-black) which makes a correct dark shadow. In dark mode --midnight flips
   to #F1EBE3 (sandy white), so the same formula produces a glowing white halo
   around every card. Re-pin all affected block shadows to #000-based mixes so
   they stay dark drop-shadows. The border-color hold-outs on fp-card and
   accordion-item also use the alias and get the same treatment. */
html[data-theme="dark"] .nsemm-feature-panel .fp-card {
	border-color: var(--hairline);
	box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
}
html[data-theme="dark"] .nsemm-feature-panel .fp-band {
	background: color-mix(in srgb, #fff 5%, transparent);
}
html[data-theme="dark"] .nsemm-stat-counter .sb {
	box-shadow: 0 8px 32px color-mix(in srgb, #000 24%, transparent),
		0 2px 8px color-mix(in srgb, #000 14%, transparent);
}
html[data-theme="dark"] .nsemm-services .svc {
	box-shadow: 0 10px 36px color-mix(in srgb, #000 26%, transparent);
}
html[data-theme="dark"] .nsemm-accordion .acc-list {
	border-color: var(--hairline);
	box-shadow: 0 10px 36px color-mix(in srgb, #000 26%, transparent);
}
html[data-theme="dark"] .nsemm-accordion .acc-item + .acc-item {
	border-top-color: var(--hairline);
}
html[data-theme="dark"] .nsemm-impact-calc .calc-panel {
	box-shadow: 0 10px 36px color-mix(in srgb, #000 26%, transparent);
}
html[data-theme="dark"] .nsemm-testimonials .t-card {
	border-color: var(--hairline);
	box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
}
html[data-theme="dark"] .nsemm-testimonials .t-card:hover {
	box-shadow: 0 16px 44px color-mix(in srgb, #000 34%, transparent);
}
html[data-theme="dark"] .nsemm-timeline .tl-card {
	border-color: var(--hairline);
	box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
}
html[data-theme="dark"] .nsemm-timeline .tl-card:hover {
	box-shadow: 0 16px 44px color-mix(in srgb, #000 34%, transparent);
}
html[data-theme="dark"] .nsemm-timeline .tl-card::before {
	border-color: var(--hairline);
}
html[data-theme="dark"] .nsemm-events-list .el-card,
html[data-theme="dark"] .nsemm-events-list .el-empty {
	border-color: var(--hairline);
	box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
}
html[data-theme="dark"] .nsemm-events-list .el-card:hover {
	box-shadow: 0 16px 44px color-mix(in srgb, #000 34%, transparent);
}
html[data-theme="dark"] .nsemm-event-details {
	border-color: var(--hairline);
	box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
}

/* == INTERIOR-PAGE CHROME (blog.css / policy.css / search-404.css) ==========
   The blog/policy filter chips and the search submit buttons are blue-surfaced
   pills whose label is var(--bg) (white in light). On dark, --bg flips dark, so
   pin the label back to white on the (lightened) blue surface. The chip resting
   state uses var(--bg) as its own surface (a card), which correctly flips to a
   dark surface — only the white-on-blue active/hover label needs pinning. */
html[data-theme="dark"] .nsemm-blog-archive .nsemm-blog-search .wp-block-search__button,
html[data-theme="dark"] .nsemm-blog-archive .nsemm-blog-chip:hover,
html[data-theme="dark"] .nsemm-blog-archive .nsemm-blog-chip.is-active,
html[data-theme="dark"] .nsemm-policy-archive .chip-list a:hover,
html[data-theme="dark"] .nsemm-policy-archive .chip-list li.current-cat a,
html[data-theme="dark"] .nsemm-search-box button,
html[data-theme="dark"] .nsemm-search-box .wp-block-search__button {
	color: #fff;
}

/* == DARK-MODE TOGGLE CONTROL (shared) =====================================
   The toggle's own colours. In light mode the toggle is styled by the block
   stylesheets; here only the dark-state visuals are set. (The icon swap is driven
   by the [data-theme] attribute on <html>, read in CSS via the ancestor.) */
html[data-theme="dark"] .nsemm-theme-toggle {
	color: var(--gold);
}

/* == SYSTEM DEFAULT (prefers-color-scheme: dark, honouring an explicit choice) =
   First-time visitors on a dark OS get dark automatically. The no-flash head
   script only writes data-theme when the visitor has made an EXPLICIT choice, so
   :root:not([data-theme="light"]) lets the media default apply unless the visitor
   has explicitly chosen light. An explicit dark choice is already covered by the
   html[data-theme="dark"] rules above. We duplicate the overrides here (CSS has no
   variables for selectors) so the system default is fully covered. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) {
		--blue: #345C9E;
		--gold: #FACD00;
		--teal: #00FACD;
		--brown: #C9C2B8;
		--sandy: #2E2B29;
		--midnight: #F1EBE3;
		--bg: #1A1918;
		--surface-card: #232120;
		--surface-raised: #34302D;
		--surface-sunken: #14110F;
		--ink: #F1EBE3;
		--ink-muted: #C9C2B8;
		--hairline: rgba(255, 255, 255, 0.09);
		--link: #7FA8E0;
		--heading-ink: #7FA8E0;
		--blue-rgb: 52, 92, 158;
		color-scheme: dark;
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) body {
		background: var(--bg);
		color: var(--ink);
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) a {
		color: var(--link);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) a:hover {
		color: color-mix(in srgb, var(--link) 70%, #fff);
	}
	/* Header keystone link colours (system-dark mirror) — see the explicit block. */
	:root:not([data-theme="light"]):not([data-theme="dark"]) .util .util-nav a {
		color: color-mix(in srgb, #fff 80%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .util .util-nav a:hover {
		color: #fff;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .hdr-wrap header .ni > a,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .hdr-wrap .logo-text {
		color: #443800;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .hdr-wrap header.light .ni > a,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .hdr-wrap header.light .logo-text {
		color: var(--blue);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .hdr-wrap .btn-p {
		color: #fff;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .hdr-wrap .btn-o {
		color: #443800;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-acc-btn,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-acc-drop a,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-acc.active > .mob-acc-btn,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-link {
		color: var(--heading-ink);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-acc-drop a[aria-current="page"],
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-link[aria-current="page"] {
		color: #fff;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-logo-badge {
		color: #443800;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) h1,
	:root:not([data-theme="light"]):not([data-theme="dark"]) h2,
	:root:not([data-theme="light"]):not([data-theme="dark"]) h3,
	:root:not([data-theme="light"]):not([data-theme="dark"]) h4,
	:root:not([data-theme="light"]):not([data-theme="dark"]) h5,
	:root:not([data-theme="light"]):not([data-theme="dark"]) h6,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .wp-block-post-title {
		color: var(--heading-ink);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-stat-counter .sn,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-stat-counter .sn-count,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-services .eyebrow,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-services .sec-h,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-services .svc h3,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-impact .impact h2,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-impact .impact .eyebrow,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-accordion .acc-btn {
		color: var(--heading-ink);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-services .svc-link .wp-block-button__link {
		background-color: transparent;
		color: var(--heading-ink);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .wp-block-group.is-style-white-card {
		background-color: var(--surface-card);
		color: var(--ink);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .wp-block-group.is-style-sandy-panel {
		background-color: var(--sandy);
		color: var(--ink);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .wp-block-button__link:not(.has-background) {
		background-color: var(--blue);
		color: #fff;
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-prose-card {
		box-shadow: 0 4px 20px color-mix(in srgb, #000 35%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-topic .nsemm-services .svc:hover,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-topic .nsemm-topic-hub .svc:hover {
		background: var(--surface-raised);
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-impact .impact .wp-block-button__link:hover {
		background: color-mix(in srgb, var(--blue) 75%, #000);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-impact .impact .impact-img {
		color: var(--ink-muted);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-services .svc:hover {
		background: var(--surface-raised);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-topic-hub .svc:hover {
		background: var(--surface-raised);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .btn-p:hover,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .hamburger:hover,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-ctas .btn-hl:hover,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-acc-drop a[aria-current="page"]:hover,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-link[aria-current="page"]:hover {
		background: color-mix(in srgb, var(--blue) 75%, #000);
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-cta .cta-band h2 {
		color: #fff;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-cta .cta-band p {
		color: color-mix(in srgb, #fff 72%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-cta .cta-band .wp-block-button.btn-co .wp-block-button__link {
		color: #fff;
		border-color: color-mix(in srgb, #fff 35%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-cta .cta-band .wp-block-button.btn-co .wp-block-button__link:hover {
		color: #fff;
		border-color: #fff;
		background: color-mix(in srgb, #fff 8%, transparent);
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .btn-hs .wp-block-button__link,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-home .hero .btn-hs .wp-block-button__link,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mob-ctas .btn-hs,
	:root:not([data-theme="light"]):not([data-theme="dark"]) a.btn-hs,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-cta .cta-band .wp-block-button.btn-cg .wp-block-button__link {
		color: #443800;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .btn-hs .wp-block-button__link,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-cta .cta-band .wp-block-button.btn-cg .wp-block-button__link,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-feature-panel .fp-btn .wp-block-button__link {
		background-color: var(--gold);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-feature-panel .fp-title.wp-block-heading {
		color: var(--heading-ink);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-site-chrome .ck-accept,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-site-chrome .share-ico.copied::after {
		color: #443800;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-site-chrome .share-ico:hover svg {
		stroke: #443800;
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-feature-panel .fp-btn .wp-block-button__link {
		color: #443800;
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-feature-panel .fp-btn .wp-block-button__link:hover {
		background: var(--surface-raised);
		color: #fff;
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-home .hero {
		background: color-mix(in srgb, var(--teal) 18%, #0B1F1B);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-home .hero .wp-block-heading {
		color: var(--heading-ink);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-home .hero .wp-block-heading em {
		color: var(--gold);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-home .hero p {
		color: var(--ink);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-home .hero .hero-img {
		background: color-mix(in srgb, #fff 6%, transparent);
		color: var(--ink-muted);
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-site-footer,
	:root:not([data-theme="light"]):not([data-theme="dark"]) footer.nsemm-site-footer {
		--bg: #FFFFFF;
		--sandy: #F1EBE3;
		--midnight: #2B2A2A;
		--brown: #443800;
		--blue: #1C3B70;
		--link: #7FA8E0;
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-blog-archive .nsemm-blog-search .wp-block-search__button,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-blog-archive .nsemm-blog-chip:hover,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-blog-archive .nsemm-blog-chip.is-active,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-policy-archive .chip-list a:hover,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-policy-archive .chip-list li.current-cat a,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-search-box button,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-search-box .wp-block-search__button {
		color: #fff;
	}

	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-theme-toggle {
		color: var(--gold);
	}

	/* Block card shadow mirror (system-dark) — see explicit block above for rationale. */
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-feature-panel .fp-card {
		border-color: var(--hairline);
		box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-feature-panel .fp-band {
		background: color-mix(in srgb, #fff 5%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-stat-counter .sb {
		box-shadow: 0 8px 32px color-mix(in srgb, #000 24%, transparent),
			0 2px 8px color-mix(in srgb, #000 14%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-services .svc {
		box-shadow: 0 10px 36px color-mix(in srgb, #000 26%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-accordion .acc-list {
		border-color: var(--hairline);
		box-shadow: 0 10px 36px color-mix(in srgb, #000 26%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-accordion .acc-item + .acc-item {
		border-top-color: var(--hairline);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-impact-calc .calc-panel {
		box-shadow: 0 10px 36px color-mix(in srgb, #000 26%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-testimonials .t-card {
		border-color: var(--hairline);
		box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-testimonials .t-card:hover {
		box-shadow: 0 16px 44px color-mix(in srgb, #000 34%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-timeline .tl-card {
		border-color: var(--hairline);
		box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-timeline .tl-card:hover {
		box-shadow: 0 16px 44px color-mix(in srgb, #000 34%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-timeline .tl-card::before {
		border-color: var(--hairline);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-events-list .el-card,
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-events-list .el-empty {
		border-color: var(--hairline);
		box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-events-list .el-card:hover {
		box-shadow: 0 16px 44px color-mix(in srgb, #000 34%, transparent);
	}
	:root:not([data-theme="light"]):not([data-theme="dark"]) .nsemm-event-details {
		border-color: var(--hairline);
		box-shadow: 0 10px 36px color-mix(in srgb, #000 28%, transparent);
	}
}