/**
 * WeStyle Design Tokens — single source of truth for every page.
 * Loaded first on every page; all other stylesheets use these variables.
 *
 * Palette: warm ivory + ink + brand rose (#c4395d) for every interactive
 * element, champagne gold for premium/decorative accents only.
 * Type: Cormorant Garamond (display: titles, section headings, prices)
 *       Inter (everything else).
 */

:root {
	/* Colour */
	--ws-ink: #211a17;
	--ws-ink-soft: #57493f;
	--ws-muted: #6f6157; /* 5.5:1 on cream — AA for text */
	--ws-bg: #ffffff;
	--ws-cream: #fbf6f1;
	--ws-cream-deep: #f3e9dd;
	--ws-line: #e9ddd0;
	--ws-rose: #c4395d;
	--ws-rose-deep: #a72c4c;
	--ws-rose-tint: #fbeaef;
	--ws-gold: #b8925a; /* decorative only (borders, icons, rules) — NOT for text */
	--ws-gold-text: #7a5d33; /* gold for text, 5:1+ on cream */
	--ws-gold-tint: #f6ecd9;
	--ws-success: #2f7d4f;
	--ws-success-tint: #e6f3ea;
	--ws-danger: #b42318;
	--ws-danger-tint: #fdecea;
	--ws-whatsapp: #25d366;

	/* Type */
	--ws-font-display: 'Cormorant Garamond', 'Times New Roman', serif;
	--ws-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ws-fs-xs: 12px;
	--ws-fs-sm: 14px;
	--ws-fs-md: 16px;
	--ws-fs-lg: 18px;
	--ws-fs-xl: 24px;
	--ws-fs-2xl: clamp(28px, 4vw, 36px);
	--ws-fs-3xl: clamp(32px, 5vw, 52px);

	/* Space (8px scale) */
	--ws-space-1: 4px;
	--ws-space-2: 8px;
	--ws-space-3: 12px;
	--ws-space-4: 16px;
	--ws-space-5: 24px;
	--ws-space-6: 32px;
	--ws-space-7: 48px;
	--ws-space-8: 64px;
	--ws-section-gap: clamp(48px, 7vw, 88px);

	/* Shape & depth */
	--ws-radius-sm: 6px;
	--ws-radius: 10px;
	--ws-radius-lg: 16px;
	--ws-radius-pill: 999px;
	--ws-shadow-sm: 0 2px 8px -2px rgba(33, 26, 23, 0.08);
	--ws-shadow: 0 10px 28px -14px rgba(33, 26, 23, 0.18);
	--ws-shadow-lg: 0 24px 48px -20px rgba(33, 26, 23, 0.28);

	/* Layout */
	--ws-container: 1240px;
	--ws-gutter: 16px;
	--ws-header-h: 72px;

	/* Motion */
	--ws-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ws-dur: 200ms;
}

@media (min-width: 768px) {
	:root { --ws-gutter: 24px; }
}
