@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors */
  --color-primary: #1E40AF; /* blue-800 */
  --color-primary-50: #EFF6FF; /* blue-50 */
  --color-primary-100: #DBEAFE; /* blue-100 */
  --color-primary-200: #BFDBFE; /* blue-200 */
  --color-primary-300: #93C5FD; /* blue-300 */
  --color-primary-400: #60A5FA; /* blue-400 */
  --color-primary-500: #3B82F6; /* blue-500 */
  --color-primary-600: #2563EB; /* blue-600 */
  --color-primary-700: #1D4ED8; /* blue-700 */
  --color-primary-800: #1E40AF; /* blue-800 */
  --color-primary-900: #1E3A8A; /* blue-900 */

  /* Secondary Colors */
  --color-secondary: #DC2626; /* red-600 */
  --color-secondary-50: #FEF2F2; /* red-50 */
  --color-secondary-100: #FEE2E2; /* red-100 */
  --color-secondary-200: #FECACA; /* red-200 */
  --color-secondary-300: #FCA5A5; /* red-300 */
  --color-secondary-400: #F87171; /* red-400 */
  --color-secondary-500: #EF4444; /* red-500 */
  --color-secondary-600: #DC2626; /* red-600 */
  --color-secondary-700: #B91C1C; /* red-700 */
  --color-secondary-800: #991B1B; /* red-800 */
  --color-secondary-900: #7F1D1D; /* red-900 */

  /* Accent Colors */
  --color-accent: #F59E0B; /* amber-500 */
  --color-accent-50: #FFFBEB; /* amber-50 */
  --color-accent-100: #FEF3C7; /* amber-100 */
  --color-accent-200: #FDE68A; /* amber-200 */
  --color-accent-300: #FCD34D; /* amber-300 */
  --color-accent-400: #FBBF24; /* amber-400 */
  --color-accent-500: #F59E0B; /* amber-500 */
  --color-accent-600: #D97706; /* amber-600 */
  --color-accent-700: #B45309; /* amber-700 */
  --color-accent-800: #92400E; /* amber-800 */
  --color-accent-900: #78350F; /* amber-900 */

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

  /* Text Colors */
  --color-text-primary: #1F2937; /* gray-800 */
  --color-text-secondary: #6B7280; /* gray-500 */

  /* Status Colors */
  --color-success: #059669; /* emerald-600 */
  --color-success-50: #ECFDF5; /* emerald-50 */
  --color-success-100: #D1FAE5; /* emerald-100 */
  --color-success-600: #059669; /* emerald-600 */

  --color-warning: #D97706; /* amber-600 */
  --color-warning-50: #FFFBEB; /* amber-50 */
  --color-warning-100: #FEF3C7; /* amber-100 */
  --color-warning-600: #D97706; /* amber-600 */

  --color-error: #DC2626; /* red-600 */
  --color-error-50: #FEF2F2; /* red-50 */
  --color-error-100: #FEE2E2; /* red-100 */
  --color-error-600: #DC2626; /* red-600 */

  /* Border Colors */
  --color-border: #E5E7EB; /* gray-200 */
  --color-border-light: #F3F4F6; /* gray-100 */

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

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

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-text-primary font-body;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 hover:bg-primary-700 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-200 hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2;
  }

  .card {
    @apply bg-surface rounded-lg border border-border shadow-sm;
  }

  .card-elevated {
    @apply bg-surface rounded-lg border border-border;
    box-shadow: var(--shadow-md);
  }

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

  .form-label {
    @apply block text-sm font-medium text-text-primary mb-2;
  }

  .breadcrumb {
    @apply flex items-center space-x-2 text-sm text-text-secondary;
  }

  .breadcrumb-item {
    @apply hover:text-primary transition-colors duration-200;
  }

  .breadcrumb-separator {
    @apply text-text-secondary;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .animation-fade-in {
    animation: fadeIn var(--transition-normal) ease-in-out;
  }

  .animation-slide-up {
    animation: slideUp var(--transition-normal) ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}