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

:root {
  /* Primary Colors */
  --color-primary: #1B365D; /* deep-navy */
  --color-primary-50: #F0F4F8; /* navy-50 */
  --color-primary-100: #D9E2EC; /* navy-100 */
  --color-primary-200: #BCCCDC; /* navy-200 */
  --color-primary-300: #9FB3C8; /* navy-300 */
  --color-primary-400: #829AB1; /* navy-400 */
  --color-primary-500: #627D98; /* navy-500 */
  --color-primary-600: #486581; /* navy-600 */
  --color-primary-700: #334E68; /* navy-700 */
  --color-primary-800: #243B53; /* navy-800 */
  --color-primary-900: #1B365D; /* navy-900 */

  /* Secondary Colors */
  --color-secondary: #E8F4F8; /* blue-gray-50 */
  --color-secondary-100: #E8F4F8; /* blue-gray-100 */
  --color-secondary-200: #D1E7DD; /* blue-gray-200 */
  --color-secondary-300: #B8D4DA; /* blue-gray-300 */
  --color-secondary-400: #9FC1C7; /* blue-gray-400 */
  --color-secondary-500: #86AEB4; /* blue-gray-500 */
  --color-secondary-600: #6D9BA1; /* blue-gray-600 */
  --color-secondary-700: #54888E; /* blue-gray-700 */
  --color-secondary-800: #3B757B; /* blue-gray-800 */
  --color-secondary-900: #226268; /* blue-gray-900 */

  /* Accent Colors */
  --color-accent: #D4A574; /* warm-amber */
  --color-accent-50: #FDF8F3; /* amber-50 */
  --color-accent-100: #FAF0E6; /* amber-100 */
  --color-accent-200: #F5E1CC; /* amber-200 */
  --color-accent-300: #F0D2B3; /* amber-300 */
  --color-accent-400: #EBC399; /* amber-400 */
  --color-accent-500: #E6B480; /* amber-500 */
  --color-accent-600: #D4A574; /* amber-600 */
  --color-accent-700: #C19660; /* amber-700 */
  --color-accent-800: #AE874C; /* amber-800 */
  --color-accent-900: #9B7838; /* amber-900 */

  /* Background Colors */
  --color-background: #FFFFFF; /* white */
  --color-surface: #F8FAFB; /* gray-50 */

  /* Text Colors */
  --color-text-primary: #2D3748; /* gray-800 */
  --color-text-secondary: #718096; /* gray-500 */

  /* Status Colors */
  --color-success: #38A169; /* green-600 */
  --color-success-50: #F0FFF4; /* green-50 */
  --color-success-100: #C6F6D5; /* green-100 */
  --color-success-500: #48BB78; /* green-500 */

  --color-warning: #D69E2E; /* yellow-600 */
  --color-warning-50: #FFFFF0; /* yellow-50 */
  --color-warning-100: #FEFCBF; /* yellow-100 */
  --color-warning-500: #ECC94B; /* yellow-500 */

  --color-error: #E53E3E; /* red-600 */
  --color-error-50: #FED7D7; /* red-50 */
  --color-error-100: #FEB2B2; /* red-100 */
  --color-error-500: #F56565; /* red-500 */

  /* Border Colors */
  --color-border: #E2E8F0; /* gray-200 */
  --color-border-light: #F7FAFC; /* gray-100 */

  /* 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.07);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 10px 25px -3px rgba(0, 0, 0, 0.15);

  /* Animation Variables */
  --transition-fast: 200ms ease-out;
  --transition-normal: 300ms ease-out;
  --transition-slow: 400ms ease-out;
}

@layer base {
  html {
    font-family: 'Inter', sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Crimson Text', serif;
    font-weight: 600;
  }
  
  .font-serif {
    font-family: 'Crimson Text', serif;
  }
  
  .font-sans {
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply bg-accent text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 hover:bg-accent-700 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2;
  }
  
  .btn-secondary {
    @apply bg-primary text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6 transition-shadow duration-300 hover:shadow-lg;
  }
  
  .form-input {
    @apply w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 400ms ease-out;
  }
  
  .animate-slide-up {
    animation: slideUp 300ms ease-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}