/* Custom Tailwind Configuration */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-terracotta-50: #fdf2f0;
  --color-terracotta-100: #fce7e3;
  --color-terracotta-200: #f9d4cc;
  --color-terracotta-300: #f3ad9e;
  --color-terracotta-400: #eb7d68;
  --color-terracotta-500: #de553d;
  --color-terracotta-600: #c2412e;
  --color-terracotta-700: #a13326;
  --color-terracotta-800: #822c23;
  --color-terracotta-900: #6b261f;
  
  --color-sand-50: #fbf9f6;
  --color-sand-100: #f5f0e8;
  --color-sand-200: #e6cBA8;
  --color-sand-300: #d4b892;
  --color-sand-400: #c49a6c;
  --color-sand-500: #b8864f;
  --color-sand-600: #a67143;
  --color-sand-700: #8a5a38;
  --color-sand-800: #734a31;
  --color-sand-900: #613e2a;
}

/* Custom Utilities */
.bg-terracotta-50 { background-color: var(--color-terracotta-50); }
.bg-terracotta-100 { background-color: var(--color-terracotta-100); }
.bg-terracotta-200 { background-color: var(--color-terracotta-200); }
.bg-terracotta-300 { background-color: var(--color-terracotta-300); }
.bg-terracotta-400 { background-color: var(--color-terracotta-400); }
.bg-terracotta-500 { background-color: var(--color-terracotta-500); }
.bg-terracotta-600 { background-color: var(--color-terracotta-600); }
.bg-terracotta-700 { background-color: var(--color-terracotta-700); }
.bg-terracotta-800 { background-color: var(--color-terracotta-800); }
.bg-terracotta-900 { background-color: var(--color-terracotta-900); }

.text-terracotta-50 { color: var(--color-terracotta-50); }
.text-terracotta-100 { color: var(--color-terracotta-100); }
.text-terracotta-200 { color: var(--color-terracotta-200); }
.text-terracotta-300 { color: var(--color-terracotta-300); }
.text-terracotta-400 { color: var(--color-terracotta-400); }
.text-terracotta-500 { color: var(--color-terracotta-500); }
.text-terracotta-600 { color: var(--color-terracotta-600); }
.text-terracotta-700 { color: var(--color-terracotta-700); }
.text-terracotta-800 { color: var(--color-terracotta-800); }
.text-terracotta-900 { color: var(--color-terracotta-900); }

.bg-sand-50 { background-color: var(--color-sand-50); }
.bg-sand-100 { background-color: var(--color-sand-100); }
.bg-sand-200 { background-color: var(--color-sand-200); }
.bg-sand-300 { background-color: var(--color-sand-300); }
.bg-sand-400 { background-color: var(--color-sand-400); }
.bg-sand-500 { background-color: var(--color-sand-500); }
.bg-sand-600 { background-color: var(--color-sand-600); }
.bg-sand-700 { background-color: var(--color-sand-700); }
.bg-sand-800 { background-color: var(--color-sand-800); }
.bg-sand-900 { background-color: var(--color-sand-900); }

.text-sand-50 { color: var(--color-sand-50); }
.text-sand-100 { color: var(--color-sand-100); }
.text-sand-200 { color: var(--color-sand-200); }
.text-sand-300 { color: var(--color-sand-300); }
.text-sand-400 { color: var(--color-sand-400); }
.text-sand-500 { color: var(--color-sand-500); }
.text-sand-600 { color: var(--color-sand-600); }
.text-sand-700 { color: var(--color-sand-700); }
.text-sand-800 { color: var(--color-sand-800); }
.text-sand-900 { color: var(--color-sand-900); }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

.animate-fade-in-up {
  animation: slideUp 1s ease-out 0.3s forwards;
  opacity: 0;
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: #C2412E;
  border-radius: 5px;
}

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