/**
 * Pauda design tokens.
 *
 * The single source of truth for colour, type, space, radius, shadow and
 * motion. Nothing elsewhere in the theme may hard-code these values.
 * Mirrors docs/02_Design_System.md.
 */

:root {
	/* ---- Colour ---- */
	--p-green-900: #1e3a2e;
	--p-green-800: #24483a;
	--p-green-700: #2e5644;
	--p-green-500: #4f8f67;
	--p-green-100: #e4ebe4;

	--p-gold-600: #9c7b3e;
	--p-gold-500: #c9a66b;
	--p-gold-100: #f3ead8;

	--p-clay-600: #a2563b;
	--p-clay-500: #b96a4a;

	/*
	 * The saved-to-wishlist red.
	 *
	 * A filled heart was using `--p-clay-500`, the terracotta from the pot
	 * palette, which reads as orange rather than as "saved". This is its own
	 * token because it means one specific thing and should not drift when the
	 * clay tone is retuned.
	 */
	--p-heart: #cf2f36;
	--p-clay-100: #f0e3da;

	--p-ivory-100: #f8f6f1;
	--p-ivory-200: #f1ede4;
	--p-gray-100: #efefef;
	--p-gray-300: #d8d6cf;
	--p-gray-400: #8a8a85;
	--p-ink-900: #222222;
	--p-white: #ffffff;

	--p-error: #d14e4e;
	--p-success: #4f8f67;

	/* Semantic */
	--p-bg: var(--p-ivory-100);
	--p-surface: var(--p-white);
	--p-text: var(--p-ink-900);
	--p-text-muted: #6b6b66;
	--p-line: rgba(46, 86, 68, 0.14);
	--p-line-soft: rgba(46, 86, 68, 0.08);

	/* ---- Type ---- */
	--p-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--p-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--p-text-display: clamp(2.75rem, 1.4rem + 5.4vw, 5rem);
	--p-text-h1: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem);
	--p-text-h2: clamp(1.75rem, 1.2rem + 2.1vw, 2.5rem);
	--p-text-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
	--p-text-h4: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
	--p-text-body: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
	--p-text-small: 0.875rem;
	--p-text-micro: 0.75rem;

	--p-leading-tight: 1.08;
	--p-leading-snug: 1.28;
	--p-leading-body: 1.65;

	--p-track-label: 0.09em;
	--p-track-btn: 0.02em;

	/* ---- Space ---- */
	--p-space-1: 0.25rem;
	--p-space-2: 0.5rem;
	--p-space-3: 0.75rem;
	--p-space-4: 1rem;
	--p-space-5: 1.5rem;
	--p-space-6: 2rem;
	--p-space-7: 3rem;
	--p-space-8: 4rem;
	--p-space-9: 6rem;
	--p-space-10: 8rem;

	/*
	 * Section rhythm.
	 *
	 * Was 7.5rem, which on a 1440 screen put 120px above a section and 120px
	 * below the one before it — 240px of empty ivory between every band on the
	 * page, enough that a section heading could sit alone on screen with its
	 * own content out of view. About a third off both figures keeps the page
	 * calm without the gaps reading as missing content.
	 */
	--p-section-y: clamp(2.75rem, 1.5rem + 4vw, 5.5rem);
	--p-section-y-compact: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);

	--p-container: 1280px;
	--p-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
	--p-measure: 68ch;

	/* ---- Radius ---- */
	--p-radius-sm: 4px;
	--p-radius-md: 10px;
	--p-radius-lg: 18px;
	--p-radius-pill: 999px;

	/* ---- Shadow ---- */
	--p-shadow-card: 0 1px 2px rgba(30, 58, 46, 0.04), 0 8px 24px rgba(30, 58, 46, 0.05);
	--p-shadow-float: 0 8px 24px rgba(30, 58, 46, 0.08), 0 32px 64px rgba(30, 58, 46, 0.14);

	/* ---- Motion ---- */
	--p-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--p-dur-micro: 150ms;
	--p-dur-ui: 220ms;
	--p-dur-panel: 400ms;

	/* ---- Layout ---- */
	--p-header-h: 68px;
	--p-announce-h: 40px;
	--p-z-header: 60;
	--p-z-panel: 90;
	--p-z-toast: 120;
}

@media (min-width: 1024px) {
	:root {
		--p-header-h: 80px;
	}
}