/* 00 — Design tokens v3 "Mulberry & Clay" (design/DESIGN.md, Stitch approved 2026-09-28).
   Mirrors Elementor Kit #12 + V4 variables sn-*. Change values here and in tools/kit-apply.php together. */

:root {
	--c-ink: #221A1E;
	--c-ink-muted: #6A5B60;
	--c-primary: #5A2F4B;
	--c-primary-50: #F7F0F4;
	--c-primary-100: #ECDDE6;
	--c-primary-700: #3E1F33;
	--c-accent: #B0472C;          /* CTA only */
	--c-accent-hover: #943A23;
	--c-bg-page: #FAF6F2;
	--c-bg-surface: #FFFFFF;
	--c-bg-subtle: #F3ECE6;
	--c-cream-deep: #EADFD5;
	--c-border: #E6DDD5;          /* decorative only — never on inputs (1.75:1) */
	--c-border-strong: #978880;   /* functional borders: inputs, ghost buttons */
	--c-primary-800: #3E1F33;    /* alias: dark feature sections */
	--c-sage: #6F7F6A;
	--c-sage-50: #EEF2EC;
	--c-sage-700: #4F5E4B;       /* badge text on sage-50 (6.1:1) */
	--c-gold: #C9A45C;           /* bundle / premium markers — decorative only */
	--c-success: #24664A; /* darkened: 4.4:1 on the cream trust panel before */
	--c-warning: #E8B54A;
	--c-error: #B3382F;
	--c-info: #3B6B8F;

	--ff-heading: "Heebo", "Arial Hebrew", Arial, sans-serif;
	--ff-body: "Assistant", "Arial Hebrew", Arial, sans-serif;

	/* Mobile first */
	--fs-display: 36px;
	--fs-h1: 30px;
	--fs-h2: 26px;
	--fs-h3: 19px;
	--fs-lead: 18px;
	--fs-body-lg: 17px;
	--fs-body: 16px;
	--fs-ui: 15px;
	--fs-sm: 14px;
	--fs-xs: 13px;
	--fs-eyebrow: 13px;

	--space-section: 48px;       /* legacy alias = section-s/m */
	--section-s: 32px;
	--section-m: 48px;
	--section-l: 72px;
	--space-block: 24px;
	--space-element: 16px;
	--space-tight: 8px;

	--container-max: 1280px;
	--container-content: 1080px;
	--container-narrow: 720px;
	--container-pad: 16px;

	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	--shadow-0: none;
	--shadow-card: 0 1px 2px rgba(42, 36, 34, .04), 0 2px 8px rgba(42, 36, 34, .04);
	--shadow-card-hover: 0 8px 24px rgba(42, 36, 34, .10);
	--shadow-overlay: 0 16px 48px rgba(42, 36, 34, .18);

	--motion-fast: 150ms ease-out;
	--motion-drawer: 250ms ease-out;
	--motion-enter: 400ms ease-out;
}

@media (min-width: 768px) {
	:root { --container-pad: 24px; }
}

@media (min-width: 1025px) {
	:root {
		--fs-display: 56px;
		--fs-h1: 40px;
		--fs-h2: 32px;
		--fs-h3: 22px;
		--fs-lead: 20px;
		--fs-body-lg: 18px;
		--space-section: 96px;
		--section-s: 48px;
		--section-m: 80px;
		--section-l: 120px;
		--space-block: 32px;
		--container-pad: 80px;
	}
}