/* =========================================================
   Dark mode overrides — applied when body has .dark
   Also supports [data-theme="dark"] for forward-compat.
   Pure dark canvas (DNA across all sub-brands) with the same teal accent
   slightly brightened for AA contrast on dark.
   ========================================================= */

body.dark,
[data-theme="dark"] {
	--bg:         #0C0D0D;       /* near-black canvas */
	--bg-alt:     #141616;       /* slightly lifted surface */
	--surface:    #1A1D1D;
	--ink:        #F5F5F4;       /* near-white text */
	--ink-2:      #C8CCCC;
	--muted:      #9CA09F;       /* lifted for AA contrast on dark bg */
	--muted-2:    #7C8180;       /* lifted for AA Large on dark bg */
	--hairline:   #2A2D2D;
	--accent:     #1BBFBA;       /* teal — same hue, holds up on dark */
	--accent-deep:#3DD9D6;       /* slightly brighter for italic accents */
	--accent-soft:#15302F;       /* deep teal for subtle backdrops */

	/* On dark mode, the inverse blocks become slightly LIGHTER than the page,
	   so they still feel like distinct features. */
	--forest:     #1A1D1D;
	--forest-mid: #2A2D2D;
	--forest-soft:#3A3D3D;
}

/* Dark-mode nav — top state (masthead, transparent) + scrolled state (pill).
   Top state: transparent, just a fine hairline beneath.
   Scrolled: dark translucent pill with backdrop blur. */
body.dark .nav-pill {
	background: transparent;
	border-color: transparent;
	border-bottom-color: rgba(245, 245, 244, .1);
}
body.dark .nav-shell.is-scrolled .nav-pill {
	background: rgba(12, 13, 13, .7);
	border-color: rgba(245, 245, 244, .1);
	border-bottom-color: rgba(245, 245, 244, .1);
	box-shadow: 0 8px 32px -14px rgba(0, 0, 0, .6);
}

/* Dark-mode theme toggle — pill background + accent dot */
body.dark .np-theme-pill { background: rgba(245, 245, 244, .18); }
body.dark .np-theme-dot {
	background: var(--accent);
	left: 16px; /* 32px pill - 14px dot - 2px right padding = 16px from left */
}

/* Italic accent — uses the brighter teal in dark mode for better legibility */
body.dark .italic,
body.dark .home-hero h1 .italic,
body.dark .sec-head h2 .italic,
body.dark .about-text h2 .italic,
body.dark .srv-name .italic,
body.dark .quote blockquote .italic,
body.dark .cta-slab h2 .italic {
	color: var(--accent-deep);
}

/* Link-arrow hover on dark */
body.dark .link-arrow:hover { color: var(--accent-deep); }

/* Placeholder gradient tints — slightly different on dark to keep depth */
body.dark .ph {
	background: var(--bg-alt);
}
body.dark .ph::before {
	background:
		radial-gradient(ellipse at 30% 30%, rgba(245, 245, 244, .04), transparent 60%),
		radial-gradient(ellipse at 70% 70%, rgba(27, 191, 186, .12), transparent 55%);
}