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

:root {
  /* Primary Colors */
  --color-primary: #1B365D; /* navy-900 */
  --color-primary-light: #2C5282; /* blue-700 */
  
  /* Accent Colors */
  --color-accent: #DC2626; /* red-600 */
  
  /* Background Colors */
  --color-background: #FFFFFF; /* white */
  --color-surface: #F7FAFC; /* gray-50 */
  
  /* Text Colors */
  --color-text-primary: #1A202C; /* gray-900 */
  --color-text-secondary: #4A5568; /* gray-600 */
  
  /* Status Colors */
  --color-success: #059669; /* emerald-600 */
  --color-warning: #D97706; /* amber-600 */
  --color-error: #DC2626; /* red-600 */
  
  /* Border Colors */
  --color-border: #E2E8F0; /* gray-200 */
  --color-border-accent: #DC2626; /* red-600 */
  
  /* Shadow Variables */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* Transition Variables */
  --transition-fast: 200ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
}

/* Custom Component Classes */
.btn-primary {
  @apply bg-accent text-white font-inter font-semibold px-6 py-3 rounded-lg border-2 border-accent transition-all duration-200 hover:bg-red-700 hover:border-red-700 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50;
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  @apply bg-white text-primary font-inter font-semibold px-6 py-3 rounded-lg border-2 border-primary transition-all duration-200 hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50;
}

.card {
  @apply bg-white rounded-lg border border-gray-200 p-6;
  box-shadow: var(--shadow-sm);
}

.card-elevated {
  @apply bg-white rounded-lg border border-gray-200 p-6;
  box-shadow: var(--shadow-lg);
}

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

.section-divider {
  @apply border-t border-gray-200;
}

/* Animation Classes */
.slide-in {
  animation: slideIn var(--transition-normal) ease-in-out;
}

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

/* Typography Utilities */
.text-headline {
  @apply font-inter font-bold text-text-primary;
}

.text-subheadline {
  @apply font-inter font-semibold text-text-primary;
}

.text-body {
  @apply font-opensans text-text-secondary;
}

.text-accent-serif {
  @apply font-playfair text-text-primary;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--color-surface);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-light);
}