:root {
  /* Premium Soft Color Palette V2 */
  --color-white: #ffffff;
  --color-cream: #faf9f6;
  --color-warm-gray: #f0eee9;
  --color-text-dark: #121212;
  --color-text-muted: #666666;
  --color-text-light: #999999;
  --bg-color: #faf9f6;

  /* Pastels & Accents */
  --color-soft-blue: #e0e7ff;
  --color-soft-blue-hover: #c7d2fe;
  --color-sky-blue: #e0f2fe;
  --color-pastel-orange: #ffedd5;
  --color-pastel-yellow: #fef9c3;
  --color-mint-green: #dcfce7;
  --color-light-purple: #f3e8ff;
  --color-primary: #000000;
  --color-primary-hover: #333333;
  --color-accent: #2563eb;
  
  /* Status Colors */
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;

  /* Typography */
  --font-primary: 'Outfit', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* Responsive Breakpoints */
  --bp-xs: 320px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Fluid Spacing */
  --spacing-xs: clamp(2px, 0.5vw, 4px);
  --spacing-sm: clamp(4px, 1vw, 8px);
  --spacing-md: clamp(12px, 1.5vw, 16px);
  --spacing-lg: clamp(16px, 2vw, 24px);
  --spacing-xl: clamp(20px, 3vw, 32px);
  --spacing-2xl: clamp(32px, 4vw, 48px);
  --spacing-3xl: clamp(40px, 5vw, 64px);
  --spacing-4xl: clamp(56px, 8vw, 96px);
  --spacing-5xl: clamp(72px, 10vw, 120px);
  --spacing-6xl: clamp(96px, 12vw, 160px);

  /* Borders & Shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-premium: 0 30px 60px -15px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.15);
  
  /* Transitions */
  --transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 800ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-width: 1440px;
  --header-height: 90px;
}