/*
 * WonderTale House — design tokens (v0.1)
 * Source of truth: docs/design-system.md
 * Enqueued by the hello-wondertale child theme and mirrored in the Elementor global kit.
 */

:root {
	/* Brand palette (approved) */
	--wt-ivory: #FFF7EE;
	--wt-teal: #064F4B;
	--wt-gold: #E9A23B;
	--wt-coral: #EE795F;
	--wt-lavender: #A17CAA;
	--wt-peach: #F8D7C4;
	--wt-forest: #52765B;

	/* Supporting neutrals and accessible text variants (proposed) */
	--wt-ink: #1F2A2A;
	--wt-teal-900: #03302D;
	--wt-night: #0B2433;
	--wt-coral-700: #B4472F;
	--wt-lavender-700: #6E4C78;
	--wt-gold-700: #8A5A10;
	--wt-forest-700: #3D5C45;
	--wt-paper-2: #FBEEDD;
	--wt-line: #EAD9C4;
	--wt-gold-hover: #DE932A;

	/* Typography */
	--wt-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--wt-font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

	--wt-fs-display: clamp(2.5rem, 1.67rem + 3.7vw, 5rem);
	--wt-fs-h1: clamp(2.25rem, 1.75rem + 2.2vw, 3.75rem);
	--wt-fs-h2: clamp(1.875rem, 1.5rem + 1.67vw, 3rem);
	--wt-fs-h3: clamp(1.375rem, 1.21rem + 0.74vw, 1.875rem);
	--wt-fs-h4: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
	--wt-fs-lead: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
	--wt-fs-body: clamp(1.0625rem, 1.04rem + 0.09vw, 1.125rem);
	--wt-fs-small: 0.9375rem;
	--wt-fs-eyebrow: 0.8125rem;
	--wt-fs-button: 1rem;

	--wt-lh-display: 1.02;
	--wt-lh-heading: 1.12;
	--wt-lh-body: 1.65;
	--wt-tracking-eyebrow: 0.16em;
	--wt-measure: 62ch;

	/* Spacing (4px base) */
	--wt-space-1: 0.25rem;
	--wt-space-2: 0.5rem;
	--wt-space-3: 0.75rem;
	--wt-space-4: 1rem;
	--wt-space-5: 1.5rem;
	--wt-space-6: 2rem;
	--wt-space-7: 3rem;
	--wt-space-8: 4rem;
	--wt-space-9: 6rem;
	--wt-space-10: 8rem;
	--wt-section-pad: clamp(4rem, 2.6rem + 6vw, 8rem);
	--wt-gutter: clamp(16px, 4vw, 40px);
	--wt-content-max: 1240px;
	--wt-reading-max: 720px;
	--wt-grid-gap: clamp(16px, 2vw, 32px);

	/* Shape and elevation */
	--wt-radius-sm: 8px;
	--wt-radius-md: 16px;
	--wt-radius-lg: 28px;
	--wt-radius-arch: 999px 999px 20px 20px;
	--wt-radius-pill: 999px;
	--wt-shadow-1: 0 1px 2px rgb(31 42 42 / 0.06), 0 4px 12px rgb(122 74 20 / 0.08);
	--wt-shadow-2: 0 8px 24px rgb(122 74 20 / 0.14);
	--wt-shadow-book: 0 18px 30px -12px rgb(3 48 45 / 0.45);
	--wt-glow-gold: 0 0 0 6px rgb(233 162 59 / 0.18);

	/* Controls */
	--wt-btn-h: 48px;
	--wt-btn-h-lg: 52px;
	--wt-btn-h-sm: 40px;
	--wt-tap-min: 44px;
	--wt-focus-ring: 3px solid var(--wt-teal-900);
	--wt-focus-offset: 3px;

	/* Motion */
	--wt-dur-fast: 150ms;
	--wt-dur-base: 250ms;
	--wt-dur-slow: 450ms;
	--wt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--wt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--wt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--wt-parallax-max: 48px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--wt-dur-fast: 0ms;
		--wt-dur-base: 0ms;
		--wt-dur-slow: 0ms;
		--wt-parallax-max: 0px;
	}
}