/* ====================================
   UXWAVE STUDIO - COLOR SYSTEM
   Premium color palette & design tokens
   ==================================== */

:root {
  /* Base Colors */
  --ux-black: #0a0a0a;
  --ux-white: #ffffff;
  --ux-cream: #f5f1ed;
  --ux-dark-bg: #0c0c0c;
  
  /* Brand Colors */
  --ux-primary: #2563eb;
  --ux-primary-dark: #1e40af;
  --ux-primary-light: #3b82f6;
  --ux-secondary: #7c3aed;
  --ux-secondary-dark: #6d28d9;
  --ux-accent: #f59e0b;
  --ux-accent-dark: #d97706;
  
  /* Text Colors */
  --ux-text-primary: #1a1a1a;
  --ux-text-secondary: #666666;
  --ux-text-muted: #999999;
  --ux-text-white: #ffffff;
  
  /* Background Gradients */
  --ux-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ux-gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --ux-gradient-cool: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --ux-gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  --ux-gradient-wave: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  
  /* Shadows */
  --ux-shadow-xs: 0 1px 3px rgba(0,0,0,0.08);
  --ux-shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --ux-shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --ux-shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
  --ux-shadow-xl: 0 12px 48px rgba(0,0,0,0.2);
  --ux-shadow-primary: 0 8px 24px rgba(37, 99, 235, 0.35);
  --ux-shadow-secondary: 0 8px 24px rgba(124, 58, 237, 0.35);
  
  /* Easing Curves - NovaWeb Style */
  --ux-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ux-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ux-ease-in-out: cubic-bezier(0.85, 0, 0.15, 1);
  --ux-ease-spring: cubic-bezier(0.6, 0.05, 0.01, 0.9);
  
  /* Spacing Scale (8pt grid) */
  --ux-space-1: 0.25rem;  /* 4px */
  --ux-space-2: 0.5rem;   /* 8px */
  --ux-space-3: 0.75rem;  /* 12px */
  --ux-space-4: 1rem;     /* 16px */
  --ux-space-5: 1.5rem;   /* 24px */
  --ux-space-6: 2rem;     /* 32px */
  --ux-space-8: 3rem;     /* 48px */
  --ux-space-10: 4rem;    /* 64px */
  --ux-space-12: 6rem;    /* 96px */
  
  /* Border Radius */
  --ux-radius-sm: 0.375rem;
  --ux-radius-md: 0.5rem;
  --ux-radius-lg: 0.75rem;
  --ux-radius-xl: 1rem;
  --ux-radius-full: 9999px;
  
  /* Transitions */
  --ux-transition-fast: 150ms;
  --ux-transition-base: 300ms;
  --ux-transition-slow: 500ms;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --ux-text-primary: #ffffff;
    --ux-text-secondary: #cccccc;
    --ux-text-muted: #999999;
  }
}