/**
 * Design System Variables
 *
 * This file contains all design tokens used throughout the theme.
 * Modify these values to customize the entire theme's appearance.
 */

:root {
	/* ========================================
	   COLORS - Primary Palette
	   ======================================== */
	--color-pink-primary: #FF6B9D;
	--color-orange-warm: #FEC180;
	--color-teal-fresh: #4ECDC4;
	--color-purple-soft: #B794F6;

	/* ========================================
	   COLORS - Neutrals
	   ======================================== */
	--color-cream: #FFF5F7;
	--color-peach-light: #FFF9E6;
	--color-mint-light: #F0FDFA;
	--color-charcoal: #2D2C34;
	--color-gray: #666666;
	--color-white: #FFFFFF;

	/* ========================================
	   GRADIENTS
	   ======================================== */
	--gradient-billie: linear-gradient(135deg, #FF6B9D 0%, #FEC180 100%);
	--gradient-papi: linear-gradient(135deg, #FEC180 0%, #4ECDC4 100%);
	--gradient-hero: linear-gradient(135deg, #FF6B9D 0%, #FEC180 50%, #4ECDC4 100%);
	--gradient-bg: linear-gradient(135deg, #FFF5F7 0%, #FFF9E6 25%, #F0FDFA 50%, #FFF5F7 75%);
	--gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);

	/* ========================================
	   TYPOGRAPHY - Font Families
	   ======================================== */
	--font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* ========================================
	   TYPOGRAPHY - Font Weights
	   ======================================== */
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-black: 800;

	/* ========================================
	   TYPOGRAPHY - Font Sizes (Responsive)
	   ======================================== */
	--text-hero: clamp(36px, 8vw, 72px);
	--text-h1: clamp(32px, 6vw, 48px);
	--text-h2: clamp(28px, 5vw, 40px);
	--text-h3: clamp(24px, 4vw, 32px);
	--text-h4: clamp(20px, 3vw, 28px);
	--text-h5: clamp(18px, 2.5vw, 24px);
	--text-body-lg: clamp(18px, 3vw, 24px);
	--text-body: 18px;
	--text-sm: 16px;
	--text-xs: 14px;

	/* ========================================
	   TYPOGRAPHY - Line Heights
	   ======================================== */
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.7;

	/* ========================================
	   SPACING SYSTEM
	   ======================================== */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 32px;
	--space-xl: 48px;
	--space-2xl: 64px;
	--space-3xl: 96px;
	--space-4xl: 128px;

	/* ========================================
	   BORDER RADIUS
	   ======================================== */
	--radius-sm: 12px;
	--radius-md: 20px;
	--radius-lg: 30px;
	--radius-xl: 40px;
	--radius-full: 9999px;

	/* ========================================
	   SHADOWS
	   ======================================== */
	--shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 15px 50px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.12);
	--shadow-hover: 0 40px 100px rgba(0, 0, 0, 0.18);
	--shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

	/* ========================================
	   TRANSITIONS & ANIMATIONS
	   ======================================== */
	--transition-speed: 300ms;
	--transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

	/* ========================================
	   LAYOUT - Container Widths
	   ======================================== */
	--container-max: 1200px;
	--container-wide: 1400px;
	--container-narrow: 800px;
	--container-padding: 20px;

	/* ========================================
	   Z-INDEX LAYERS
	   ======================================== */
	--z-base: 1;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-modal: 500;
	--z-lightbox: 1000;
	--z-top: 9999;
}

/* ========================================
   REDUCED MOTION SUPPORT
   Respects user preference for reduced motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-speed: 0ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ========================================
   DARK MODE SUPPORT (Optional)
   Uncomment to enable dark mode
   ======================================== */
/*
@media (prefers-color-scheme: dark) {
	:root {
		--color-charcoal: #F0F0F0;
		--color-gray: #CCCCCC;
		--color-white: #1A1A1A;
		--color-cream: #2D2C34;
		--color-peach-light: #252525;
		--color-mint-light: #1F1F1F;
	}
}
*/