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

/* Custom Tailwind Configuration */
@layer base {
  :root {
    --color-primary: #0556c7;
    --color-background-light: #f5f7f8;
    --color-background-dark: #0f1723;
  }
  
  html {
    font-family: 'Inter', sans-serif;
  }
  
  body {
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  /* Material Symbols Outlined font configuration */
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  
  /* Custom button styles */
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-lg font-bold hover:bg-primary/90 transition-colors;
  }
  
  .btn-secondary {
    @apply bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-50 px-4 py-2 rounded-lg font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors;
  }
  
  /* Form input styles */
  .form-input {
    @apply block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white py-3 px-4 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-primary focus:border-primary;
  }
  
  /* Card styles */
  .card {
    @apply bg-white dark:bg-background-dark p-6 rounded-lg shadow-md;
  }
  
  /* Navigation styles */
  .nav-link {
    @apply text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white transition-colors;
  }
  
  .nav-link-active {
    @apply text-primary dark:text-primary font-bold;
  }
}

@layer utilities {
  /* Custom spacing utilities */
  .section-padding {
    @apply py-16 sm:py-24;
  }
  
  .container-padding {
    @apply px-4 sm:px-6 lg:px-8;
  }
  
  /* Background utilities */
  .bg-gradient-overlay {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
  }
  
  .bg-gradient-overlay-light {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track {
    background: #2d3748;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #4a5568;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #718096;
  }
}

/* Animation utilities for AOS compatibility */
[data-aos] {
  pointer-events: none;
}

[data-aos].aos-animate {
  pointer-events: auto;
}

/* Focus styles for accessibility */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}