@import "tailwindcss";

@layer base {
  :root {
    --brand-red: #DC2626;
    --brand-red-dark: #B91C1C;
    --brand-green: #15803D;
    --brand-green-dark: #166534;
    --brand-cream: #FAF8F5;
    --brand-sand: #F5F2EB;
    --brand-border: #E7E2D8;
    --brand-charcoal: #111827;
  }

  body {
    background-color: var(--brand-cream);
    color: var(--brand-charcoal);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
}

/* Custom Utilities & Animations */
.bg-cream {
  background-color: #FAF8F5;
}

.bg-sand {
  background-color: #F5F2EB;
}

.border-sand-dark {
  border-color: #E7E2D8;
}

.text-brand-red {
  color: #DC2626;
}

.bg-brand-red {
  background-color: #DC2626;
}

.hover\:bg-brand-red-dark:hover {
  background-color: #B91C1C;
}

.text-brand-green {
  color: #15803D;
}

.bg-brand-green {
  background-color: #15803D;
}

.hover\:bg-brand-green-dark:hover {
  background-color: #166534;
}

/* Smooth Scrolling & Scrollbar */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

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

/* Modal Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Pulse Badge */
.pulse-badge {
  box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.4);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.5);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(21, 128, 61, 0);
  }
  100% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(21, 128, 61, 0);
  }
}