/*
 * Design tokens — espresso/tan-teal identity (v3, 2026-07-19 pivot).
 * Mirrors the tokens used across the frontend-prototype Artifacts
 * (C:\Projects\shirini-shop\frontend-prototype) so the real theme
 * matches the approved design exactly. Dark mode follows the OS/
 * browser preference only (no manual toggle exists on the real site).
 */

:root{
	--cream-bg:#F7FBFA; --surface:#FFFFFF; --surface-variant:#E4F2F1; --surface-high:#FFFFFF;
	--outline:#BFDCDA; --outline-soft:#DCEEEC; --search-bg:#F9F9F9;
	--on-surface:#0F2D2B; --on-surface-variant:#4B6E6B;

	--espresso-90:#0A2624; --espresso-80:#136464; --espresso-70:#1B8F8C; --espresso-50:#3FA6A3; --espresso-30:#8FC9C7;
	--tan-80:#CBFFFF;

	--caramel:#E8735C; --caramel-dark:#B84A34; --caramel-container:#FAE0DB; --on-caramel-container:#6B2E1F;
	--olive:#136464; --olive-container:#CBFFFF; --on-olive-container:#136464;

	--success:#4B7A3F; --error:#9C3B2E; --error-container:#F7DEDA;

	--primary:var(--espresso-70); --on-primary:#CBFFFF;
	--accent:var(--caramel); --on-accent:#0A2624;

	--shadow-color: 178, 40%, 15%;
	--elev1: 0 1px 3px hsla(var(--shadow-color),0.12), 0 1px 2px hsla(var(--shadow-color),0.08);
	--elev2: 0 4px 14px hsla(var(--shadow-color),0.14), 0 1px 3px hsla(var(--shadow-color),0.10);

	--r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
	--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;

	--display-face:'YekanBakh', sans-serif;
	--body-face:'YekanBakh', sans-serif;
}

@media (prefers-color-scheme: dark){
	:root{
		--cream-bg:#0F2624; --surface:#153331; --surface-variant:#1C403D; --surface-high:#173835;
		--outline:#3A6360; --outline-soft:#254A47; --search-bg:#2E2924;
		--on-surface:#E8FBFA; --on-surface-variant:#9FC7C4;
		--primary:var(--tan-80); --on-primary:var(--espresso-90);
		--shadow-color: 178, 55%, 3%;
	}
}