/* ---------------------------------------------------------------------------
 * Design System 5 — Monsoon Dark
 * Cinematic · Nocturnal · High-Contrast
 *
 * Dark-mode first with deep charcoal bases, luminous electric highlights
 * and filmic typography. The tokens themselves are dark; this sheet adds
 * the cinematic layer.
 * ------------------------------------------------------------------------- */

body.np-system-monsoon-dark {
	--np-color-inverse-ink: #e9edf3;
}

body.np-system-monsoon-dark .np-header {
	border-bottom-color: color-mix(in srgb, var(--np-color-neutral-4) 25%, transparent);
	backdrop-filter: blur(12px);
	background: color-mix(in srgb, var(--np-color-surface) 92%, transparent);
}

/* Luminous accent glows. */
body.np-system-monsoon-dark .np-btn:hover {
	box-shadow: 0 0 24px color-mix(in srgb, var(--np-color-accent) 45%, transparent);
}

body.np-system-monsoon-dark .np-live__dot,
body.np-system-monsoon-dark .np-breaking__pulse {
	box-shadow: 0 0 12px var(--np-color-error);
}

/* Film grain overlay on heroes for the cinematic feel. */
body.np-system-monsoon-dark .np-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 3px 3px;
	opacity: 0.6;
	mix-blend-mode: overlay;
}

/* Neon-tinted category labels. */
body.np-system-monsoon-dark .np-card__cat,
body.np-system-monsoon-dark .np-eyebrow {
	color: var(--np-color-primary);
	text-shadow: 0 0 14px color-mix(in srgb, var(--np-color-primary) 60%, transparent);
}

/* Cards: glassy dark panels with luminous edges on hover. */
body.np-system-monsoon-dark .np-card {
	border-color: color-mix(in srgb, var(--np-color-neutral-4) 18%, transparent);
	background: var(--np-color-surface);
}

body.np-system-monsoon-dark .np-card:hover {
	border-color: color-mix(in srgb, var(--np-color-primary) 55%, transparent);
	box-shadow: 0 0 32px color-mix(in srgb, var(--np-color-primary) 18%, transparent);
}

/* Filmic article: larger leading, softer ink. */
body.np-system-monsoon-dark .np-article__content {
	color: var(--np-color-neutral-4);
}

body.np-system-monsoon-dark .np-article__content > p:first-of-type::first-letter {
	color: var(--np-color-primary);
	text-shadow: 0 0 18px color-mix(in srgb, var(--np-color-primary) 55%, transparent);
}

body.np-system-monsoon-dark .np-article__title {
	color: var(--np-color-neutral-4);
}

body.np-system-monsoon-dark .np-meta,
body.np-system-monsoon-dark .np-article__dek {
	color: var(--np-color-neutral-4);
	opacity: 0.8;
}

/* Section heads glow subtly. */
body.np-system-monsoon-dark .np-section__head {
	border-bottom-color: color-mix(in srgb, var(--np-color-primary) 40%, transparent);
}

/* Newsletter block inverts to a luminous panel. */
body.np-system-monsoon-dark .np-newsletter {
	background: linear-gradient(
		135deg,
		var(--np-color-surface) 0%,
		color-mix(in srgb, var(--np-color-secondary) 22%, var(--np-color-surface)) 100%
	);
	border: 1px solid color-mix(in srgb, var(--np-color-primary) 45%, transparent);
	color: var(--np-color-neutral-4);
}

body.np-system-monsoon-dark .np-newsletter .np-btn {
	background: var(--np-color-primary);
	color: var(--np-color-on-primary);
}

/* Footer melts into the dark. */
body.np-system-monsoon-dark .np-footer {
	background: #080a0e;
}