/**
 * Atlas Guide — design tokens.
 *
 * Single source of truth for colors, type, spacing, radii, motion.
 * Values here are DEFAULTS. The Customizer (inc/customizer.php) prints an
 * inline :root override after this file on both the front end and the editor.
 *
 * Rule: no component, template or block may hardcode a hex value.
 */

:root {
	/* ---- Brand colors (Customizer-editable) ---- */
	--mg-color-charcoal: #1d1d1b;
	--mg-color-paper: #fbf9f5;
	--mg-color-ivory: #f7f4ee;
	--mg-color-terracotta: #b85c38;
	--mg-color-terracotta-dark: #98492d;
	--mg-color-sand: #d8c3a5;
	--mg-color-sand-light: #f1dcc0;
	--mg-color-olive: #3e4635;
	--mg-color-whatsapp: #25d366;
	--mg-color-warm-gray: #e8e3da;
	--mg-color-muted: #6f6b63;

	/* ---- Fixed system colors ---- */
	--mg-color-white: #ffffff;
	--mg-color-line: #e5dfd5;
	--mg-color-success: #527a57;
	--mg-color-error: #a84335;

	/* ---- Derived surfaces (recomputed from brand tokens) ---- */
	--mg-surface-page: var(--mg-color-ivory);
	--mg-surface-raised: var(--mg-color-paper);
	--mg-surface-dark: var(--mg-color-charcoal);
	--mg-text-body: var(--mg-color-charcoal);
	--mg-text-muted: var(--mg-color-muted);
	--mg-text-on-dark: rgba(255, 255, 255, 0.78);
	--mg-border: var(--mg-color-line);
	--mg-focus-ring: color-mix(in srgb, var(--mg-color-terracotta) 45%, transparent);

	/* ---- Typography ---- */
	--mg-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--mg-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--mg-text-eyebrow: 0.6875rem;   /* 11px */
	--mg-text-small: 0.8125rem;     /* 13px */
	--mg-text-base: 1rem;           /* 16px */
	--mg-text-lead: clamp(1rem, 1.6vw, 1.1875rem);      /* 16 → 19px */
	--mg-text-h3: clamp(1.375rem, 2vw, 1.75rem);        /* 22 → 28px */
	--mg-text-h2: clamp(1.75rem, 3vw, 2.5rem);          /* 28 → 40px */
	--mg-text-h1: clamp(2.125rem, 4.4vw, 3.5rem);       /* 34 → 56px */
	--mg-text-display-l: clamp(2.375rem, 5.2vw, 4.25rem);  /* 38 → 68px */
	--mg-text-display-xl: clamp(3.25rem, 8.8vw, 7.25rem);  /* 52 → 116px */

	--mg-leading-tight: 0.9;
	--mg-leading-heading: 1.05;
	--mg-leading-body: 1.65;
	--mg-tracking-display: -0.03em;
	--mg-tracking-heading: -0.02em;
	--mg-tracking-eyebrow: 0.16em;

	/* ---- Spacing scale (design-guide.md §7.4) ---- */
	--mg-space-1: 4px;
	--mg-space-2: 8px;
	--mg-space-3: 12px;
	--mg-space-4: 16px;
	--mg-space-5: 24px;
	--mg-space-6: 32px;
	--mg-space-7: 48px;
	--mg-space-8: 64px;
	--mg-space-9: 80px;
	--mg-space-10: 96px;
	--mg-space-11: 120px;
	--mg-space-12: 160px;

	--mg-section-y: clamp(76px, 9vw, 128px);
	--mg-gutter: 48px;

	/* ---- Layout ---- */
	--mg-container: 1240px;
	--mg-container-wide: 1440px;
	--mg-container-text: 720px;
	--mg-header-height: 82px;

	/* ---- Radii ---- */
	--mg-radius-s: 8px;
	--mg-radius-m: 14px;
	--mg-radius-l: 22px;
	--mg-radius-pill: 999px;

	/* ---- Elevation ---- */
	--mg-shadow-s: 0 6px 18px rgba(29, 29, 27, 0.06);
	--mg-shadow-m: 0 18px 50px rgba(29, 29, 27, 0.08);

	/* ---- Motion ---- */
	--mg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--mg-duration-fast: 180ms;
	--mg-duration-base: 320ms;
	--mg-duration-slow: 700ms;
	--mg-transition-fast: var(--mg-duration-fast) var(--mg-ease);
	--mg-transition-base: var(--mg-duration-base) var(--mg-ease);
}

@media (max-width: 820px) {
	:root {
		--mg-gutter: 32px;
	}
}

@media (max-width: 560px) {
	:root {
		--mg-gutter: 24px;
	}
}