/* Optional light mode (modern + readable) */
body.light {
	/* Surfaces */
	--bg: #f6f8fc;         /* page background (soft, not pure white) */
	--bg-elev: #ffffff;    /* primary card surface */
	--bg-elev-2: #f1f5ff;  /* subtle elevated/alt surface */

	/* “card” overlay tokens used in a few places */
	--card: rgba(2, 6, 23, 0.035);
	--card-2: rgba(2, 6, 23, 0.055);

	/* Typography */
	--text: #0b1220;                 /* near-black */
	--muted: rgba(11, 18, 32, 0.68); /* secondary text */

	/* Borders + shadows */
	--border: rgba(11, 18, 32, 0.10);
	--border-2: rgba(11, 18, 32, 0.16);

	/* Accent stays your green, but tune softness for light bg */
	--accent: #16a34a; /* modern green (slightly deeper than neon) */
	--accent-soft: rgba(22, 163, 74, 0.14);

	/* Shadows for light mode: softer + more realistic */
	--shadow: 0 18px 50px rgba(11, 18, 32, 0.10);

	/* Code surfaces */
	--code-bg: #0b1220;
	--code-border: rgba(11, 18, 32, 0.18);
}

body.light .topbar {
	background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,248,252,0.86));
	backdrop-filter: blur(12px);
}

body.light :where(.content) a {
	color: #2563eb;
}
body.light :where(.content) a:hover {
	color: #1d4ed8;
}

body.light .callout {
	background: rgba(2, 6, 23, 0.03);
	border-color: rgba(11, 18, 32, 0.10);
}

body.light .sidebar {
	background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,248,252,0.92));
	border-right: 1px solid var(--border);
	backdrop-filter: blur(10px);
}

body.light .sidebar__inner::-webkit-scrollbar-thumb {
	background: rgba(11, 18, 32, 0.12);
}
body.light .sidebar__inner::-webkit-scrollbar-thumb:hover {
	background: rgba(11, 18, 32, 0.18);
}

/* Category cards */
body.light .navcat {
	background: rgba(255,255,255,0.85);
	border-color: rgba(11, 18, 32, 0.10);
	box-shadow: 0 14px 40px rgba(11, 18, 32, 0.08);
}

body.light .navcat__toggle:hover {
	background: rgba(2, 6, 23, 0.03);
}

body.light .navcat__icon,
body.light .navlink__icon {
	background: rgba(2, 6, 23, 0.03);
	border-color: rgba(11, 18, 32, 0.10);
}

body.light .navcat__label,
body.light .navlink__text {
	color: rgba(11, 18, 32, 0.92);
}

/* Chevrons / muted text */
body.light .navcat__chev,
body.light .navgroup__chev {
	color: rgba(11, 18, 32, 0.55);
}

/* Submenus */
body.light .submenu {
	background: rgba(2, 6, 23, 0.02);
	border-top-color: rgba(11, 18, 32, 0.08);
}

body.light .submenu--nested {
	background: rgba(255,255,255,0.65);
	border-color: rgba(11, 18, 32, 0.10);
}

/* Nested group button */
body.light .navgroup__toggle {
	background: rgba(255,255,255,0.70);
	border-color: rgba(11, 18, 32, 0.10);
}
body.light .navgroup__toggle:hover {
	background: rgba(2, 6, 23, 0.03);
	border-color: rgba(11, 18, 32, 0.14);
}

/* Links */
body.light .navlink {
	background: rgba(255,255,255,0.70);
	border-color: rgba(11, 18, 32, 0.00);
}
body.light .navlink:hover {
	background: rgba(2, 6, 23, 0.03);
	border-color: rgba(11, 18, 32, 0.10);
}

/* Active link */
body.light .navlink.active {
	background: linear-gradient(135deg, rgba(22,163,74,0.14), rgba(255,255,255,0.80));
	border-color: rgba(22,163,74,0.28);
}

/* "Cardy" variant */
body.light .navlink--card {
	background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(255,255,255,0.75));
	border-color: rgba(22,163,74,0.18);
}
body.light .navlink--card:hover {
	border-color: rgba(22,163,74,0.28);
}

/* Mobile overlay looks nicer on light */
body.light .overlay {
	background: rgba(11, 18, 32, 0.35);
	backdrop-filter: blur(3px);
}