/**
 * HappyPaws Design Tokens
 * Pastel pink · cream white · butter yellow
 */

:root {
	/* Colors — Cream */
	--hp-cream-50: #fffdf9;
	--hp-cream-100: #fff8f0;
	--hp-cream-200: #fff0e3;
	--hp-cream-300: #ffe8d6;

	/* Colors — Pink */
	--hp-pink-50: #fff5f8;
	--hp-pink-100: #ffe4ec;
	--hp-pink-200: #ffd0de;
	--hp-pink-300: #f8b4c4;
	--hp-pink-400: #f0a0b4;
	--hp-pink-500: #e891a8;
	--hp-pink-600: #d67a94;

	/* Colors — Butter Yellow */
	--hp-yellow-50: #fffdf5;
	--hp-yellow-100: #fff6d6;
	--hp-yellow-200: #ffefbf;
	--hp-yellow-300: #ffe9a8;
	--hp-yellow-400: #ffdf85;

	/* Semantic */
	--hp-color-bg: var(--hp-cream-50);
	--hp-color-bg-elevated: #ffffff;
	--hp-color-bg-subtle: var(--hp-cream-100);
	--hp-color-surface: #ffffff;
	--hp-color-surface-hover: var(--hp-pink-50);
	--hp-color-border: var(--hp-pink-100);
	--hp-color-border-strong: var(--hp-pink-200);
	--hp-color-text: #4a3f47;
	--hp-color-text-muted: #8a7b82;
	--hp-color-text-inverse: #ffffff;
	--hp-color-accent: var(--hp-pink-500);
	--hp-color-accent-hover: var(--hp-pink-600);
	--hp-color-accent-soft: var(--hp-pink-100);
	--hp-color-highlight: var(--hp-yellow-200);
	--hp-color-highlight-soft: var(--hp-yellow-100);

	/* Typography */
	--hp-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hp-font-size-xs: 0.75rem;
	--hp-font-size-sm: 0.875rem;
	--hp-font-size-base: 1rem;
	--hp-font-size-lg: 1.125rem;
	--hp-font-size-xl: 1.25rem;
	--hp-font-size-2xl: 1.5rem;
	--hp-font-size-3xl: 2rem;
	--hp-font-size-4xl: 2.5rem;
	--hp-font-weight-normal: 400;
	--hp-font-weight-semibold: 600;
	--hp-font-weight-bold: 700;
	--hp-font-weight-extrabold: 800;
	--hp-line-height-tight: 1.25;
	--hp-line-height-base: 1.6;
	--hp-line-height-relaxed: 1.75;
	--hp-letter-spacing-tight: -0.02em;

	/* Spacing */
	--hp-space-1: 0.25rem;
	--hp-space-2: 0.5rem;
	--hp-space-3: 0.75rem;
	--hp-space-4: 1rem;
	--hp-space-5: 1.5rem;
	--hp-space-6: 2rem;
	--hp-space-8: 3rem;
	--hp-space-10: 4rem;
	--hp-space-12: 5rem;

	/* Layout */
	--hp-container-sm: 640px;
	--hp-container-md: 768px;
	--hp-container-lg: 1024px;
	--hp-container-xl: 1700px;
	--hp-container-padding: var(--hp-space-4);
	--hp-header-height: 4rem;
	--hp-header-height-mobile: 3.5rem;

	/* Radius — cozy rounded cards */
	--hp-radius-sm: 0.5rem;
	--hp-radius-md: 0.75rem;
	--hp-radius-lg: 1rem;
	--hp-radius-xl: 1.25rem;
	--hp-radius-2xl: 1.5rem;
	--hp-radius-full: 9999px;

	/* Shadow */
	--hp-shadow-sm: 0 1px 3px rgba(74, 63, 71, 0.06);
	--hp-shadow-md: 0 4px 16px rgba(232, 145, 168, 0.12);
	--hp-shadow-lg: 0 8px 32px rgba(232, 145, 168, 0.16);
	--hp-shadow-card: 0 2px 12px rgba(74, 63, 71, 0.06);

	/* Transitions */
	--hp-transition-fast: 150ms ease;
	--hp-transition-base: 250ms ease;

	/* Z-index */
	--hp-z-header: 100;
	--hp-z-mobile-nav: 200;
	--hp-z-overlay: 150;

	/* Live video overlay chips */
	--hp-live-chip-height: 1.625rem;
	--hp-live-chip-pad-x: var(--hp-space-3);
	--hp-live-chip-font: var(--hp-font-size-xs);
	--hp-live-chip-gap: var(--hp-space-1);
	--hp-live-overlay-inset: var(--hp-space-3);

	/* Breakpoints (for reference in comments) */
	/* sm: 480px | md: 768px | lg: 1024px | xl: 1280px */
}

@media (min-width: 768px) {
	:root {
		--hp-container-padding: var(--hp-space-6);
		--hp-header-height: 4.5rem;
	}
}