/**
 * Pharma Storefront — design tokens.
 *
 * Every color, spacing, radius, shadow, and breakpoint used anywhere in
 * this plugin's CSS is defined here, once (§28). Component stylesheets
 * (components.css, and shop.css/product.css/filters.css as later phases
 * add them) reference these variables instead of hard-coded values, so
 * a future re-theme is a handful of edits here, not a hunt through every
 * file. Values are tuned to the client's reference design: deep emerald
 * green primary, warm cream background, white cards, gold/yellow accent.
 *
 * Loaded only on storefront-relevant pages — see
 * Core\Assets::is_storefront_context(). Never on the homepage.
 */

:root {
	/* ---- Color ---- */
	--pharma-primary: #1c3f34;
	--pharma-primary-dark: #12291f;
	--pharma-secondary: #2f5c4c;
	--pharma-accent: #d99a2b;
	--pharma-accent-dark: #b97f1d;
	--pharma-background: #f7f3ea;
	--pharma-card: #ffffff;
	--pharma-border: #e6e1d3;
	--pharma-text: #1a1f1c;
	--pharma-muted: #6b7268;
	--pharma-success: #1f8a4c;
	--pharma-danger: #c2483c;

	/* ---- Typography ---- */
	--pharma-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pharma-font-heading: Georgia, "Times New Roman", Times, serif;
	--pharma-font-size-sm: 0.8125rem;
	--pharma-font-size-base: 0.9375rem;
	--pharma-font-size-lg: 1.125rem;
	--pharma-font-size-xl: 1.5rem;

	/* ---- Spacing ---- */
	--pharma-space-1: 4px;
	--pharma-space-2: 8px;
	--pharma-space-3: 12px;
	--pharma-space-4: 16px;
	--pharma-space-5: 24px;
	--pharma-space-6: 32px;

	/* ---- Radius ---- */
	--pharma-radius-sm: 6px;
	--pharma-radius-md: 12px;
	--pharma-radius-lg: 20px;
	--pharma-radius-pill: 999px;

	/* ---- Shadow ---- */
	--pharma-shadow-sm: 0 1px 2px rgba(20, 30, 25, 0.06);
	--pharma-shadow-md: 0 4px 16px rgba(20, 30, 25, 0.08);

	/* ---- Layout ---- */
	--pharma-container-width: 1280px;
	--pharma-breakpoint-sm: 480px;
	--pharma-breakpoint-md: 768px;
	--pharma-breakpoint-lg: 1024px;
	--pharma-breakpoint-xl: 1280px;
}