/*
 * Design tokens — neutral defaults.
 * Each brand's child theme overrides these custom properties; shared
 * component CSS only ever references tokens, never raw values.
 */
:root {
	/* Colour */
	--cotr-color-primary: #10c0d9;
	--cotr-color-primary-contrast: #ffffff;
	--cotr-color-accent: #ff5a8b;
	--cotr-color-text: #1a1a1a;
	--cotr-color-text-muted: #5f6368;
	--cotr-color-surface: #ffffff;
	--cotr-color-surface-alt: #f6f7f7;
	--cotr-color-border: #e4e6e8;
	--cotr-color-trust: #0e9f6e; /* reviewer badges / verified accents */
	--cotr-color-insight: #6d4df2; /* expert-insight badges / editorial accents */

	/* Typography */
	--cotr-font-heading: "Montserrat", system-ui, sans-serif;
	--cotr-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
	--cotr-text-base: 1rem;
	--cotr-leading-body: 1.75;

	/* Shape & spacing */
	--cotr-radius-card: 12px;
	--cotr-radius-pill: 999px;
	--cotr-space-unit: 8px;
	--cotr-gutter: clamp(16px, 4vw, 40px); /* page-edge padding; full-bleed elements mirror it */
	--cotr-content-max: 720px;
	/*
	 * Match the Magento store chrome's container so blog content never exceeds
	 * the embedded header/footer width. b-Vibe's store steps 1170 → 940; a
	 * brand whose store differs overrides these two in its child theme.
	 */
	--cotr-page-max: 1170px; /* store container ≥1200px viewport */
	--cotr-page-max-mid: 940px; /* store container 1024–1199px viewport */

	/* Elevation */
	--cotr-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
	--cotr-shadow-lift: 0 6px 14px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.1);

	/* Behaviour */
	--cotr-anchor-offset: 110px; /* keep in sync with OFFSET in toc.js */
	--cotr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}