/*
 * WP Ember design tokens - the single source of visual truth.
 * Nothing outside this file should hardcode a colour, size, radius or shadow.
 */
:root {
	/* Brand */
	--wpe-ember: #e8480f;
	--wpe-ember-dark: #c93b0a;
	--wpe-amber: #ffb627;
	--wpe-ink: #20242e;
	--wpe-paper: #fbf7f2;
	--wpe-core: #ffe3b3;

	/* Text */
	--wpe-text: #20242e;
	--wpe-text-muted: #5b6675;
	--wpe-text-soft: #8a93a1;
	--wpe-text-invert: #f5efe6;

	/* Surfaces + borders */
	--wpe-surface: #ffffff;
	--wpe-surface-2: #f7f8fa;
	--wpe-surface-sunken: #fbf7f2;
	--wpe-border: #e6e0d4;
	--wpe-border-cool: #e4e8ee;

	/* Typography */
	--wpe-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--wpe-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--wpe-fs-12: 0.75rem;
	--wpe-fs-13: 0.8125rem;
	--wpe-fs-14: 0.875rem;
	--wpe-fs-15: 0.9375rem;
	--wpe-fs-16: 1rem;
	--wpe-fs-18: 1.125rem;
	--wpe-fs-20: 1.25rem;
	--wpe-fs-24: 1.5rem;
	--wpe-fs-30: 1.875rem;
	--wpe-fs-38: 2.375rem;
	--wpe-fs-48: 3rem;
	--wpe-fs-60: 3.75rem;

	/* Spacing (4px base) */
	--wpe-sp-1: 4px;
	--wpe-sp-2: 8px;
	--wpe-sp-3: 12px;
	--wpe-sp-4: 16px;
	--wpe-sp-5: 20px;
	--wpe-sp-6: 24px;
	--wpe-sp-8: 32px;
	--wpe-sp-10: 40px;
	--wpe-sp-12: 48px;
	--wpe-sp-16: 64px;
	--wpe-sp-20: 80px;
	--wpe-sp-24: 96px;

	/* Radii */
	--wpe-r-6: 6px;
	--wpe-r-8: 8px;
	--wpe-r-12: 12px;
	--wpe-r-16: 16px;
	--wpe-r-pill: 999px;
	--wpe-radius-card: var(--wpe-r-12);
	--wpe-radius-btn: var(--wpe-r-8);

	/* Elevation */
	--wpe-shadow-soft: 0 1px 3px rgba(20, 28, 40, 0.06), 0 1px 2px rgba(20, 28, 40, 0.04);
	--wpe-shadow-lift: 0 8px 28px rgba(20, 28, 40, 0.12);
	--wpe-shadow-card: var(--wpe-shadow-soft);

	/* Layout */
	--wpe-container: 1140px;
	--wpe-container-narrow: 760px;

	/* Callouts (docs) */
	--wpe-callout-info: #2563eb;
	--wpe-callout-info-bg: #eef4ff;
	--wpe-callout-tip: #1a7f5a;
	--wpe-callout-tip-bg: #eafaf3;
	--wpe-callout-warn: #c2410c;
	--wpe-callout-warn-bg: #fdf1ea;

	/* Focus ring */
	--wpe-ring: 0 0 0 3px rgba(232, 72, 15, 0.35);

	/* Motion */
	--wpe-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--wpe-dur: 0.15s;

	/* Z-index scale */
	--wpe-z-header: 100;
	--wpe-z-dropdown: 200;
	--wpe-z-overlay: 900;
}