@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors */
  --color-primary: #8B5CF6; /* violet-500 - Premium service distinction, trust building */
  --color-primary-50: #F5F3FF; /* violet-50 */
  --color-primary-100: #EDE9FE; /* violet-100 */
  --color-primary-200: #DDD6FE; /* violet-200 */
  --color-primary-300: #C4B5FD; /* violet-300 */
  --color-primary-400: #A78BFA; /* violet-400 */
  --color-primary-500: #8B5CF6; /* violet-500 */
  --color-primary-600: #7C3AED; /* violet-600 */
  --color-primary-700: #6D28D9; /* violet-700 */
  --color-primary-800: #5B21B6; /* violet-800 */
  --color-primary-900: #4C1D95; /* violet-900 */

  /* Secondary Colors */
  --color-secondary: #F59E0B; /* amber-500 - Legacy moments, established authority */
  --color-secondary-50: #FFFBEB; /* amber-50 */
  --color-secondary-100: #FEF3C7; /* amber-100 */
  --color-secondary-200: #FDE68A; /* amber-200 */
  --color-secondary-300: #FCD34D; /* amber-300 */
  --color-secondary-400: #FBBF24; /* amber-400 */
  --color-secondary-500: #F59E0B; /* amber-500 */
  --color-secondary-600: #D97706; /* amber-600 */
  --color-secondary-700: #B45309; /* amber-700 */
  --color-secondary-800: #92400E; /* amber-800 */
  --color-secondary-900: #78350F; /* amber-900 */

  /* Accent Colors */
  --color-accent: #EF4444; /* red-500 - Contact urgency, immediate action */
  --color-accent-50: #FEF2F2; /* red-50 */
  --color-accent-100: #FEE2E2; /* red-100 */
  --color-accent-200: #FECACA; /* red-200 */
  --color-accent-300: #FCA5A5; /* red-300 */
  --color-accent-400: #F87171; /* red-400 */
  --color-accent-500: #EF4444; /* red-500 */
  --color-accent-600: #DC2626; /* red-600 */
  --color-accent-700: #B91C1C; /* red-700 */
  --color-accent-800: #991B1B; /* red-800 */
  --color-accent-900: #7F1D1D; /* red-900 */

  /* Creative Energy */
  --color-creative: #EC4899; /* pink-500 - Strong pink for creative energy */
  --color-creative-50: #FDF2F8; /* pink-50 */
  --color-creative-100: #FCE7F3; /* pink-100 */
  --color-creative-200: #FBCFE8; /* pink-200 */
  --color-creative-300: #F9A8D4; /* pink-300 */
  --color-creative-400: #F472B6; /* pink-400 */
  --color-creative-500: #EC4899; /* pink-500 */
  --color-creative-600: #DB2777; /* pink-600 */
  --color-creative-700: #BE185D; /* pink-700 */
  --color-creative-800: #9D174D; /* pink-800 */
  --color-creative-900: #831843; /* pink-900 */

  /* Background Colors */
  --color-background: #FFFFFF; /* white - Clean canvas, content focus */
  --color-surface: #F8FAFC; /* slate-50 - Subtle section separation, visual rest */
  --color-surface-100: #F1F5F9; /* slate-100 */
  --color-surface-200: #E2E8F0; /* slate-200 */
  --color-surface-300: #CBD5E1; /* slate-300 */

  /* Text Colors */
  --color-text-primary: #1F2937; /* gray-800 - Extended reading comfort, professional tone */
  --color-text-secondary: #6B7280; /* gray-500 - Clear hierarchy, supporting information */
  --color-text-muted: #9CA3AF; /* gray-400 */
  --color-text-light: #D1D5DB; /* gray-300 */

  /* Status Colors */
  --color-success: #10B981; /* emerald-500 - Positive confirmation, completed actions */
  --color-success-50: #ECFDF5; /* emerald-50 */
  --color-success-100: #D1FAE5; /* emerald-100 */
  --color-success-500: #10B981; /* emerald-500 */
  --color-success-600: #059669; /* emerald-600 */

  --color-warning: #F59E0B; /* amber-500 - Important notices, pricing highlights */
  --color-warning-50: #FFFBEB; /* amber-50 */
  --color-warning-100: #FEF3C7; /* amber-100 */
  --color-warning-500: #F59E0B; /* amber-500 */
  --color-warning-600: #D97706; /* amber-600 */

  --color-error: #EF4444; /* red-500 - Helpful guidance, form corrections */
  --color-error-50: #FEF2F2; /* red-50 */
  --color-error-100: #FEE2E2; /* red-100 */
  --color-error-500: #EF4444; /* red-500 */
  --color-error-600: #DC2626; /* red-600 */

  /* Border Colors */
  --color-border: #E2E8F0; /* slate-200 */
  --color-border-light: #F1F5F9; /* slate-100 */
  --color-border-dark: #CBD5E1; /* slate-300 */

  /* Shadow Variables */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Transition Variables */
  --transition-fast: 200ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

/* Base Styles */
@layer base {
  html {
    font-family: 'Inter', sans-serif;
  }
  
  body {
    color: var(--color-text-primary);
    background-color: var(--color-background);
    line-height: 1.6;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-primary);
  }

  .font-display {
    font-family: 'Playfair Display', serif;
  }

  .font-body {
    font-family: 'Inter', sans-serif;
  }
}

/* Component Styles */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }

  .btn-secondary {
    @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-secondary-600 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2;
  }

  .btn-accent {
    @apply bg-accent text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-accent-600 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2;
  }

  .btn-outline {
    @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }

  .card {
    @apply bg-white rounded-lg shadow-md border border-surface-200 transition-all duration-300;
  }

  .card-hover {
    @apply hover:shadow-lg hover:-translate-y-1;
  }

  .input-field {
    @apply w-full px-4 py-3 border border-surface-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200;
  }

  .section-padding {
    @apply py-16 px-4 sm:px-6 lg:px-8;
  }

  .container-custom {
    @apply max-w-7xl mx-auto;
  }

  .text-gradient-primary {
    @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
  }

  .text-gradient-secondary {
    @apply bg-gradient-to-r from-secondary-600 to-secondary-400 bg-clip-text text-transparent;
  }

  .legacy-accent {
    @apply text-secondary-600 font-display font-semibold;
  }

  .premium-highlight {
    @apply text-primary-600 font-medium;
  }

  .creative-energy {
    @apply text-creative-500 font-medium;
  }
}

/* Utility Classes */
@layer utilities {
  .transition-fast {
    transition: all var(--transition-fast);
  }

  .transition-normal {
    transition: all var(--transition-normal);
  }

  .transition-slow {
    transition: all var(--transition-slow);
  }

  .shadow-elegant {
    box-shadow: var(--shadow-md);
  }

  .shadow-elevated {
    box-shadow: var(--shadow-lg);
  }

  .shadow-premium {
    box-shadow: var(--shadow-xl);
  }
}