/* BBRain Theme — Dark Mode Variables (default) */

:root,
[data-theme="dark"] {
	--color-bg:            #000000;
	--color-surface:       #070707;
	--color-card:          rgba(255, 255, 255, 0.03);
	--color-card-hover:    rgba(255, 255, 255, 0.06);
	--color-border:        rgba(255, 255, 255, 0.08);
	--color-border-strong: rgba(255, 255, 255, 0.18);
	--color-text:          rgba(255, 255, 255, 0.85);
	--color-text-muted:    rgba(255, 255, 255, 0.48);
	--color-text-subtle:   rgba(255, 255, 255, 0.28);
	--color-heading:       #ffffff;
	--color-primary:       #824BFE;
	--color-secondary:     #F097FF;
	--color-primary-glow:  rgba(130, 75, 254, 0.35);
	--color-input-bg:      rgba(255, 255, 255, 0.05);
	--color-input-border:  rgba(255, 255, 255, 0.12);
}

/* System preference fallback (no JS) */
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg:            #000000;
		--color-surface:       #070707;
		--color-card:          rgba(255, 255, 255, 0.03);
		--color-card-hover:    rgba(255, 255, 255, 0.06);
		--color-border:        rgba(255, 255, 255, 0.08);
		--color-border-strong: rgba(255, 255, 255, 0.18);
		--color-text:          rgba(255, 255, 255, 0.85);
		--color-text-muted:    rgba(255, 255, 255, 0.48);
		--color-text-subtle:   rgba(255, 255, 255, 0.28);
		--color-heading:       #ffffff;
		--color-primary:       #824BFE;
		--color-secondary:     #F097FF;
		--color-primary-glow:  rgba(130, 75, 254, 0.35);
		--color-input-bg:      rgba(255, 255, 255, 0.05);
		--color-input-border:  rgba(255, 255, 255, 0.12);
	}
}

/* Toggle icon states — dark = show sun (click to go light) */
[data-theme="dark"] .toggle-icon--sun  { display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] .toggle-icon--moon { display: none; }

@media (prefers-color-scheme: dark) {
	.toggle-icon--sun  { display: flex; align-items: center; justify-content: center; }
	.toggle-icon--moon { display: none; }
}

/* Architecture SVG connectors */
[data-theme="dark"] .arch-svg line { stroke: rgba(130, 75, 254, 0.35); }

@media (prefers-color-scheme: dark) {
	.arch-svg line { stroke: rgba(130, 75, 254, 0.35); }
}

/* Selection */
[data-theme="dark"] ::selection { background: rgba(130, 75, 254, 0.3); color: #fff; }

@media (prefers-color-scheme: dark) {
	::selection { background: rgba(130, 75, 254, 0.3); color: #fff; }
}