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

/* Custom color variables */
:root {
  --color-primary: #D80000;
  --color-primary-light: #FF4D4D;
  --color-primary-dark: #A30000;
  --color-secondary: #001F3F;
  --color-secondary-light: #003366;
  --color-secondary-dark: #00152B;
  --color-accent: #FFD700;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #3B82F6;
}

/* Custom utility classes */
.bg-primary {
  @apply bg-[#D80000] hover:bg-[#C00000];
}

.bg-secondary {
  @apply bg-[#001F3F] hover:bg-[#001A35];
}

.text-primary {
  @apply text-[#D80000];
}

.text-secondary {
  @apply text-[#001F3F];
}

.border-primary {
  @apply border-[#D80000];
}

.border-secondary {
  @apply border-[#001F3F];
}

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

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

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full hover:bg-gray-500;
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-red-500 focus:border-red-500 transition duration-200;
}

/* Buttons */
.btn {
  @apply inline-flex items-center justify-center px-6 py-2.5 rounded-md font-medium transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-70 disabled:cursor-not-allowed;
}

.btn-primary {
  @apply btn bg-[#D80000] text-white hover:bg-[#C00000] focus:ring-red-500;
}

.btn-secondary {
  @apply btn bg-[#001F3F] text-white hover:bg-[#001A35] focus:ring-blue-800;
}

.btn-outline {
  @apply btn border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
}

/* Cards */
.card {
  @apply bg-white rounded-lg shadow-sm overflow-hidden;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
}

.card-body {
  @apply p-6;
}

/* Alerts */
.alert {
  @apply p-4 rounded-md border;
}

.alert-success {
  @apply bg-green-50 border-green-200 text-green-800;
}

.alert-warning {
  @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-danger {
  @apply bg-red-50 border-red-200 text-red-800;
}

.alert-info {
  @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Badges */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

.badge-info {
  @apply bg-blue-100 text-blue-800;
}

/* Animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Responsive typography */
@screen sm {
  html {
    font-size: 16px;
  }
}

@screen lg {
  html {
    font-size: 18px;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-full-width {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}