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

:root {
  --color-primary: #FF5722; /* Lava Orange */
  --color-secondary: #212121; /* Deep Charcoal */
  --color-background: #F5F5F5; /* Off-White */
  --color-text: #212121;
  --color-text-light: #F5F5F5;
  --font-family: 'Outfit', sans-serif;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-background);
  color: var(--color-text);
}

.font-heading {
  font-family: var(--font-family);
  font-weight: 700;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-background);
}
::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Utilities */
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }

.text-secondary { color: var(--color-secondary); }
.bg-secondary { background-color: var(--color-secondary); }

/* Buttons */
.btn-primary {
  @apply bg-[#FF5722] text-white px-6 py-3 rounded-lg font-bold transition-all duration-300 hover:bg-[#E64A19] hover:shadow-lg transform hover:-translate-y-1;
}

.btn-secondary {
  @apply bg-[#212121] text-white px-6 py-3 rounded-lg font-bold transition-all duration-300 hover:bg-[#424242] hover:shadow-lg;
}

/* Card Effects */
.card-hover {
  @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}