/*
 * Site color themes.
 * Dark: Synthetic Lime #C8FF00 on BIO Black #06110D
 * Light: Toxic Violet #4B0082 on Soft Chrome #F1F2F7
 */

/* Dark theme via explicit preference or class */
html[data-theme="dark"],
html.theme-dark {
	color-scheme: dark;

	--bio: #06110D;
	--bio-deep: #030907;
	--bio-raised: #0C1F18;
	--lime: #C8FF00;
	--lime-hover: #A8D600;
	--on-lime: #06110D;

	--ink: #C8FF00;
	--muted: #8A9A7E;
	--accent: #C8FF00;
	--card: #0C1F18;
	--rule: rgba(200, 255, 0, 0.16);
	--cream: #0C1F18;
	--cream-ink: #C5D4B0;
	--body: #C5D4B0;
	--surface: #102820;
	--surface-deep: #0A1812;
	--navy: var(--bio);
	--navy-deep: var(--bio-deep);
	--gold: var(--lime);
	--bg: var(--bio);
	--line: var(--rule);

	--tint-weak: rgba(200, 255, 0, 0.04);
	--tint: rgba(200, 255, 0, 0.1);
	--tint-strong: rgba(200, 255, 0, 0.18);
	--tint-border: rgba(200, 255, 0, 0.28);
	--selection-bg: #C8FF00;
	--selection-fg: #06110D;
	--shadow: rgba(0, 0, 0, 0.45);

	/* Shared CTA / Amazon affiliate button colors */
	--btn-bg: var(--lime);
	--btn-fg: var(--on-lime);
	--btn-border: var(--bio-deep);
	--btn-bg-hover: var(--lime-hover);
}

/* System dark preference when no explicit light theme */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		color-scheme: dark;

		--bio: #06110D;
		--bio-deep: #030907;
		--bio-raised: #0C1F18;
		--lime: #C8FF00;
		--lime-hover: #A8D600;
		--on-lime: #06110D;

		--ink: #C8FF00;
		--muted: #8A9A7E;
		--accent: #C8FF00;
		--card: #0C1F18;
		--rule: rgba(200, 255, 0, 0.16);
		--cream: #0C1F18;
		--cream-ink: #C5D4B0;
		--body: #C5D4B0;
		--surface: #102820;
		--surface-deep: #0A1812;
		--navy: var(--bio);
		--navy-deep: var(--bio-deep);
		--gold: var(--lime);
		--bg: var(--bio);
		--line: var(--rule);

		--tint-weak: rgba(200, 255, 0, 0.04);
		--tint: rgba(200, 255, 0, 0.1);
		--tint-strong: rgba(200, 255, 0, 0.18);
		--tint-border: rgba(200, 255, 0, 0.28);
		--selection-bg: #C8FF00;
		--selection-fg: #06110D;
		--shadow: rgba(0, 0, 0, 0.45);

		--btn-bg: var(--lime);
		--btn-fg: var(--on-lime);
		--btn-border: var(--bio-deep);
		--btn-bg-hover: var(--lime-hover);
	}
}

/*
 * Light theme — Toxic Violet on Soft Chrome.
 * Buttons: Soft Chrome text on Toxic Violet (high contrast, Amazon-style CTA weight).
 */
html[data-theme="light"],
html.theme-light {
	color-scheme: light;

	--bio: #F1F2F7;           /* Soft Chrome — page backgrounds */
	--bio-deep: #E4E6ED;      /* slightly cooler / darker chrome */
	--bio-raised: #D8DAE4;    /* raised / panel chrome */
	--lime: #4B0082;          /* Toxic Violet — text, accents, icons (token name kept) */
	--lime-hover: #34005B;    /* deeper violet hover */
	--on-lime: #F1F2F7;       /* chrome on violet buttons */

	--ink: #4B0082;
	--muted: #6B4A8F;
	--accent: #4B0082;
	--card: #E4E6ED;
	--rule: rgba(75, 0, 130, 0.18);
	--cream: #E4E6ED;
	--cream-ink: #36005D;
	--body: #36005D;
	--surface: #D8DAE4;
	--surface-deep: #CCCEDA;
	--navy: var(--bio);
	--navy-deep: var(--bio-deep);
	--gold: var(--lime);
	--bg: var(--bio);
	--line: var(--rule);

	--tint-weak: rgba(75, 0, 130, 0.06);
	--tint: rgba(75, 0, 130, 0.1);
	--tint-strong: rgba(75, 0, 130, 0.16);
	--tint-border: rgba(75, 0, 130, 0.28);
	--selection-bg: #4B0082;
	--selection-fg: #F1F2F7;
	--shadow: rgba(75, 0, 130, 0.18);

	--btn-bg: var(--lime);
	--btn-fg: var(--on-lime);
	--btn-border: var(--lime-hover);
	--btn-bg-hover: var(--lime-hover);
}

/* System light preference when no explicit dark theme */
@media (prefers-color-scheme: light) {
	html:not([data-theme="dark"]) {
		color-scheme: light;

		--bio: #F1F2F7;
		--bio-deep: #E4E6ED;
		--bio-raised: #D8DAE4;
		--lime: #4B0082;
		--lime-hover: #34005B;
		--on-lime: #F1F2F7;

		--ink: #4B0082;
		--muted: #6B4A8F;
		--accent: #4B0082;
		--card: #E4E6ED;
		--rule: rgba(75, 0, 130, 0.18);
		--cream: #E4E6ED;
		--cream-ink: #36005D;
		--body: #36005D;
		--surface: #D8DAE4;
		--surface-deep: #CCCEDA;
		--navy: var(--bio);
		--navy-deep: var(--bio-deep);
		--gold: var(--lime);
		--bg: var(--bio);
		--line: var(--rule);

		--tint-weak: rgba(75, 0, 130, 0.06);
		--tint: rgba(75, 0, 130, 0.1);
		--tint-strong: rgba(75, 0, 130, 0.16);
		--tint-border: rgba(75, 0, 130, 0.28);
		--selection-bg: #4B0082;
		--selection-fg: #F1F2F7;
		--shadow: rgba(75, 0, 130, 0.18);

		--btn-bg: var(--lime);
		--btn-fg: var(--on-lime);
		--btn-border: var(--lime-hover);
		--btn-bg-hover: var(--lime-hover);
	}
}