/* ─────────────────────────────────────────────
 *  Mary Peppins — Design tokens
 *  Variables CSS globales (colores, tipografía, espaciado, easings).
 * ───────────────────────────────────────────── */

:root {
	/* Brand palette */
	--mp-green:        #273424;
	--mp-green-deep:   #1b261a;
	--mp-cream:        #ebe7e0;
	--mp-cream-soft:   #f1ede6;
	--mp-ink:          #0e120d;
	--mp-graphite:     #2a2a26;
	--mp-stone:        #7c7a73;
	--mp-stone-soft:   #b8b5ad;
	--mp-line:         rgba(14, 18, 13, 0.12);
	--mp-line-cream:   rgba(235, 231, 224, 0.18);
	--mp-gold:         #c8b68a;
	--mp-gold-deep:    #a8956a;

	/* Typography */
	--mp-serif: 'Fraunces', 'Times New Roman', Georgia, serif;
	--mp-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--mp-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Spacing scale (8pt) */
	--mp-s1: 4px;
	--mp-s2: 8px;
	--mp-s3: 16px;
	--mp-s4: 24px;
	--mp-s5: 32px;
	--mp-s6: 48px;
	--mp-s7: 64px;
	--mp-s8: 96px;
	--mp-s9: 128px;

	/* Radii */
	--mp-r-sm:   6px;
	--mp-r-md:   12px;
	--mp-r-lg:   16px;
	--mp-r-xl:   24px;
	--mp-r-pill: 999px;

	/* Shadows */
	--mp-shadow-soft: 0 18px 40px -22px rgba(14, 18, 13, 0.18);
	--mp-shadow-card: 0 1px 0 rgba(14, 18, 13, 0.04), 0 12px 32px -22px rgba(14, 18, 13, 0.14);
	--mp-shadow-deep: 0 25px 60px -25px rgba(0, 0, 0, 0.4);

	/* Motion */
	--mp-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
	--mp-fast:   200ms;
	--mp-mid:    320ms;
	--mp-slow:   480ms;

	/* Layout */
	--mp-container-max: 1280px;
	--mp-section-py:    clamp(64px, 8vw, 120px);
	--mp-section-px:    clamp(20px, 5vw, 96px);

	/* Header */
	--mp-header-h:      80px;
	--mp-header-h-mob:  64px;

	/* Z-index scale (header siempre por encima de todo)
	 * sticky < overlay < mobile-menu < header
	 */
	--mp-z-sticky:    30;
	--mp-z-overlay:   60;
	--mp-z-mobile:    70;
	--mp-z-header:    100;
}

@media (max-width: 768px) {
	:root {
		--mp-section-py: clamp(56px, 12vw, 80px);
		--mp-section-px: 24px;
	}
}