/* Light editorial theme — boutique only. base.css's dark tokens (used by
   every gym page) are never edited; these are new, additional custom
   properties scoped to body.boutique-context so they can't bleed
   anywhere else. Loads before shop.css (see inc/enqueue.php). */

body.boutique-context {
	/* Surfaces */
	--shop-bg: #ffffff;
	--shop-surface: #ffffff;
	--shop-surface-alt: #f7f7f5;
	--shop-surface-sunken: #f2f2ef;
	--shop-overlay: rgb(20 20 18 / 0.45);

	/* Borders / dividers — the mockup leans on thin dividers, not shadow */
	--shop-border: #e3e3de;
	--shop-border-strong: #c9c9c2;
	--shop-divider: #ececE8;

	/* Text */
	--shop-text-heading: #17170f;
	--shop-text-body: #3f3f38;
	--shop-text-muted: #71716a;
	--shop-text-faint: #9a9a91;
	/* White-on-#8bc53f fails AA contrast — dark text on accent fills instead. */
	--shop-text-on-accent: #12220a;

	/* Accent — the real theme tokens (assets/css/base.css), never a
	   separately invented green. */
	--shop-accent: var( --accent );
	--shop-accent-hover: var( --accent-hover );
	--shop-accent-fill: var( --accent-fill );

	/* Tint/shade ramp. Was computed live via color-mix() from the 3 real
	   tokens above — reverted to plain, precomputed hex values because
	   the host's CSS aggregator/minifier (combines every stylesheet into
	   one bundle) doesn't parse color-mix() correctly, and a parsing
	   error on this rule was corrupting unrelated rules later in the
	   same combined bundle (e.g. the mega-menu's dropdown never showing,
	   despite its own CSS being completely unrelated to color). If the
	   brand green (--accent/--accent-hover/--accent-fill in base.css)
	   ever changes, these 6 lines need recomputing by hand to match. */
	--shop-accent-50: #f8fcf3;
	--shop-accent-100: #eff7e4;
	--shop-accent-200: #dfefc9;
	--shop-accent-300: #c7e3a3;
	--shop-accent-400: var( --shop-accent-hover );
	--shop-accent-500: var( --shop-accent );
	--shop-accent-600: var( --shop-accent-fill );
	--shop-accent-700: #5a8a27;
	--shop-accent-800: #44681d;
	--shop-accent-900: #2e4714;

	--shop-shadow-sm: 0 1px 2px rgb(20 20 18 / 0.06);
	--shop-shadow-md: 0 4px 16px rgb(20 20 18 / 0.08);
	--shop-shadow-lg: 0 12px 32px rgb(20 20 18 / 0.14);

	/* Rounded boutique look (client request) — softer than the gym's own
	   near-square base.css scale (2–6px), shop only. */
	--shop-radius-sm: 8px;
	--shop-radius-md: 14px;
}