/*
 * Brand tokens — design doc §2.3 (durable layer).
 * Light mode is the default; dark mode follows the OS via prefers-color-scheme
 * (no toggle in v1, §3.5). Do not substitute unverified shades (§7.6).
 */

:root {
	/* Light mode (default) */
	--wp-bg: #FFFFFF;
	--wp-bg-alt: #F4F4F3;
	--wp-border: #E3E3E1;
	--wp-text: #1F1F1E;
	--wp-text-secondary: #5C5C59;
	--wp-text-muted: #6E6E6A;
	--wp-coral: #D85A30;
	--wp-coral-interactive: #B84A26;
	--wp-coral-tint: #FAECE7; /* light-mode-only per §2.3; max one use per page, never behind screenshots */
	--wp-plum: #533B4D;
	--wp-plum-soft: #C9BCC9;

	/* Semantic aliases (values per §2.3; dark mode swaps them per its table) */
	--wp-link: var(--wp-coral-interactive);
	--wp-button-bg: var(--wp-coral-interactive);
	--wp-button-bg-hover: #A94423; /* --wp-coral-interactive darkened 8% (§3.3) */
	--wp-button-text: #FFFFFF;
	--wp-footer-bg: var(--wp-plum);
	--wp-footer-text: #F3F0EC;
	--wp-footer-text-secondary: var(--wp-plum-soft);
}

@media (prefers-color-scheme: dark) {
	:root {
		--wp-bg: #141F2B;
		--wp-bg-alt: #1D3348;
		--wp-border: #31465C;
		--wp-text: #F3F0EC;
		--wp-text-secondary: #B9C0C7;
		--wp-text-muted: #94A0AD;
		--wp-coral: #E8875A;
		--wp-coral-interactive: #F0997B;
		/* §2.3: Plum reads muddy on navy — structure elements render in --wp-text instead */
		--wp-plum: #F3F0EC;
		--wp-plum-soft: #B9C0C7;

		--wp-link: #F0997B;
		--wp-button-bg: #E8875A; /* §2.3: dark buttons use #E8875A fill with #141F2B text */
		--wp-button-bg-hover: #D67C53;
		--wp-button-text: #141F2B;
		--wp-footer-bg: #1D3348;
		--wp-footer-text: #F3F0EC;
		--wp-footer-text-secondary: #B9C0C7;
	}
}