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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: 'Garamond', 'Georgia', serif;
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: #0f172a;
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark body {
  background-color: #0f172a;
  color: #f0f4ff;
}

/* Scrollbar styling with smooth transitions */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  transition: background-color 0.3s ease;
}

html.dark ::-webkit-scrollbar-track {
  background: #1e293b;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Base link styles */
a {
  @apply transition-colors duration-200;
}

/* Component styles */
.card {
  @apply bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-lg p-4 transition-all duration-300;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

html.dark .card {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card:hover {
  @apply shadow-lg dark:shadow-xl;
}

.btn-primary {
  @apply px-4 py-2 bg-navy-500 text-white rounded-lg hover:bg-navy-600 transition-all duration-200 font-medium active:scale-95;
}

.btn-secondary {
  @apply px-4 py-2 bg-slate-200 dark:bg-slate-700 text-navy-900 dark:text-white rounded-lg hover:bg-slate-300 dark:hover:bg-slate-600 transition-all duration-200 font-medium active:scale-95;
}

.btn-danger {
  @apply px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all duration-200 font-medium active:scale-95;
}

/* Button focus states for accessibility */
button:focus-visible {
  @apply outline-2 outline-offset-2 outline-navy-500;
}

html.dark button:focus-visible {
  @apply outline-navy-400;
}

.badge {
  @apply inline-block px-3 py-1 rounded-full text-sm font-medium transition-colors duration-200;
}

.badge-success {
  @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200;
}

.badge-warning {
  @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200;
}

.badge-error {
  @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200;
}

.badge-info {
  @apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200;
}

/* Text selection styling */
::selection {
  @apply bg-navy-500 text-white;
}

html.dark ::selection {
  @apply bg-navy-400 text-navy-900;
}

/* Input and form elements */
input,
textarea,
select {
  @apply transition-colors duration-200;
}

input:focus,
textarea:focus,
select:focus {
  @apply outline-none ring-2 ring-navy-500 ring-offset-2;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  @apply ring-offset-slate-900;
}

/* Loading spinner animation */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 2s linear infinite;
}

/* Fade in animation */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* Slide in from right */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

/* Responsive text sizing */
@media (max-width: 640px) {
  html {
    font-size: 14px;
  }
}

/* Dark mode specific enhancements */
html.dark {
  color-scheme: dark;
}

html {
  color-scheme: light;
}
