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

/* Custom CSS Variables */
:root {
  --color-brand-primary: #0A66C2;
  --color-brand-hover: #085299;
  --color-success: #00875A;
  --color-warning: #FFAB00;
  --color-error: #DE350B;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

/* Base Styles */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans;
  }
}

/* Custom Component Styles */
@layer components {
  /* Button variants */
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-brand-500 text-white font-semibold rounded-lg hover:bg-brand-600 transition-all shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
  }
  
  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-white text-brand-500 font-semibold rounded-lg border-2 border-brand-500 hover:bg-brand-50 transition-colors;
  }
  
  /* Card styles */
  .card {
    @apply bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow;
  }
  
  /* Section spacing */
  .section {
    @apply py-20;
  }
  
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-4;
  }
  
  .section-subtitle {
    @apply text-xl text-gray-600 max-w-3xl mx-auto;
  }
}

/* Custom Utilities */
@layer utilities {
  /* Animation utilities */
  .animate-delay-100 {
    animation-delay: 100ms;
  }
  
  .animate-delay-200 {
    animation-delay: 200ms;
  }
  
  .animate-delay-300 {
    animation-delay: 300ms;
  }
  
  /* Custom focus styles */
  .focus-brand {
    @apply focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2;
  }
  
  /* Gradient text */
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-brand-500 to-brand-700;
  }
}

/* Custom Scrollbar (webkit browsers) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-brand-500 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-brand-600;
}

/* Smooth transitions for page load */
body {
  animation: fadeIn 0.3s ease-in;
}

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

/* Print styles */
@media print {
  nav,
  footer,
  .no-print {
    display: none !important;
  }
  
  body {
    @apply text-black bg-white;
  }
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card {
    @apply border-2 border-gray-900;
  }
  
  button,
  a {
    @apply underline;
  }
}

/* Dark mode support (optional - disabled by default) */
/* Uncomment to enable dark mode */
/*
@media (prefers-color-scheme: dark) {
  body {
    @apply bg-gray-900 text-gray-100;
  }
  
  .card {
    @apply bg-gray-800 border-gray-700;
  }
  
  .section-title {
    @apply text-white;
  }
}
*/