/* =============================================================
   BBRain — Light Mode
   Variables applied when: system prefers light OR [data-theme="light"]
============================================================= */

/* System preference */
@media (prefers-color-scheme: light) {
	:root {
		--color-bg:           #ffffff;
		--color-hero-bg:      #fafafa;
		--color-surface:      #f5f5f7;
		--color-card:         rgba(0, 0, 0, 0.02);
		--color-header-bg:    rgba(255, 255, 255, 0.82);
		--color-border:       rgba(0, 0, 0, 0.07);
		--color-border-strong:rgba(0, 0, 0, 0.18);
		--color-text:         rgba(0, 0, 0, 0.78);
		--color-text-muted:   rgba(0, 0, 0, 0.48);
		--color-text-subtle:  rgba(0, 0, 0, 0.3);
		--color-heading:      #0a0a0a;
	}
}

/* Explicit override via JS toggle */
[data-theme="light"] {
	--color-bg:           #ffffff;
	--color-hero-bg:      #fafafa;
	--color-surface:      #f5f5f7;
	--color-card:         rgba(0, 0, 0, 0.02);
	--color-header-bg:    rgba(255, 255, 255, 0.82);
	--color-border:       rgba(0, 0, 0, 0.07);
	--color-border-strong:rgba(0, 0, 0, 0.18);
	--color-text:         rgba(0, 0, 0, 0.78);
	--color-text-muted:   rgba(0, 0, 0, 0.48);
	--color-text-subtle:  rgba(0, 0, 0, 0.3);
	--color-heading:      #0a0a0a;
}

/* --- Cards get a visible shadow in light mode --------- */
@media (prefers-color-scheme: light) {
	.problem-card,
	.discovery-tile,
	.step-card,
	.arch-node,
	.profile-card,
	.profile-events,
	.metric-card {
		background: #ffffff;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
	}

	.final-cta-card {
		background: #f9f9fb;
		border-color: rgba(130, 75, 254, 0.25);
	}

	.hero-headline { color: #0a0a0a; }
}

[data-theme="light"] .problem-card,
[data-theme="light"] .discovery-tile,
[data-theme="light"] .step-card,
[data-theme="light"] .arch-node,
[data-theme="light"] .profile-card,
[data-theme="light"] .profile-events,
[data-theme="light"] .metric-card {
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .final-cta-card {
	background: #f9f9fb;
	border-color: rgba(130, 75, 254, 0.25);
}

/* --- Glow effects (subtler in light mode) -------------- */
@media (prefers-color-scheme: light) {
	.hero-glow--primary   { opacity: 0.35; }
	.hero-glow--secondary { opacity: 0.25; }
	.hero-glow--center    { opacity: 0.2; }
	.final-cta-glow--1    { opacity: 0.2; }
	.final-cta-glow--2    { opacity: 0.15; }
}

[data-theme="light"] .hero-glow--primary   { opacity: 0.35; }
[data-theme="light"] .hero-glow--secondary { opacity: 0.25; }
[data-theme="light"] .hero-glow--center    { opacity: 0.2; }
[data-theme="light"] .final-cta-glow--1    { opacity: 0.2; }
[data-theme="light"] .final-cta-glow--2    { opacity: 0.15; }

/* --- Toggle icon: show moon in light mode (clicking → dark) */
@media (prefers-color-scheme: light) {
	.toggle-icon--sun  { display: none; }
	.toggle-icon--moon { display: flex; }
}

[data-theme="light"] .toggle-icon--sun  { display: none; }
[data-theme="light"] .toggle-icon--moon { display: flex; }

/* --- Header shadow in light (more prominent) ----------- */
@media (prefers-color-scheme: light) {
	.site-header.scrolled {
		box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 20px rgba(0,0,0,0.06);
	}

	.section--stats { background: #ffffff; }
}

[data-theme="light"] .site-header.scrolled {
	box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 20px rgba(0,0,0,0.06);
}

[data-theme="light"] .section--stats { background: #ffffff; }

/* --- Scrollbar ----------------------------------------- */
@media (prefers-color-scheme: light) {
	::-webkit-scrollbar { width: 6px; }
	::-webkit-scrollbar-track { background: #f0f0f0; }
	::-webkit-scrollbar-thumb { background: rgba(130, 75, 254, 0.3); border-radius: 3px; }
	::-webkit-scrollbar-thumb:hover { background: rgba(130, 75, 254, 0.55); }
}

[data-theme="light"] ::-webkit-scrollbar { width: 6px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0f0; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(130, 75, 254, 0.3); border-radius: 3px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(130, 75, 254, 0.55); }

/* --- Selection ----------------------------------------- */
@media (prefers-color-scheme: light) {
	::selection { background: rgba(130, 75, 254, 0.15); color: #0a0a0a; }
}

[data-theme="light"] ::selection { background: rgba(130, 75, 254, 0.15); color: #0a0a0a; }

/* --- Video placeholder in light ----------------------- */
@media (prefers-color-scheme: light) {
	.video-placeholder {
		background: #f0eeff;
		background-image: radial-gradient(ellipse at 50% 50%, rgba(130,75,254,0.08), transparent 70%);
	}
}

[data-theme="light"] .video-placeholder {
	background: #f0eeff;
	background-image: radial-gradient(ellipse at 50% 50%, rgba(130,75,254,0.08), transparent 70%);
}