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

/* Custom Color Palette - Terracotta & Sand */
:root {
  --terracotta-50: #fff7ed;
  --terracotta-100: #ffedd5;
  --terracotta-200: #fed7aa;
  --terracotta-300: #fdba74;
  --terracotta-400: #fb923c;
  --terracotta-500: #f97316;
  --terracotta-600: #ea580c;
  --terracotta-700: #c2410c;
  --terracotta-800: #9a3412;
  --terracotta-900: #7c2d12;
  
  --sand-50: #fafaf9;
  --sand-100: #f5f5f4;
  --sand-200: #e7e5e4;
  --sand-300: #d6d3d1;
  --sand-400: #a8a29e;
  --sand-500: #78716c;
  --sand-600: #57534e;
  --sand-700: #44403c;
  --sand-800: #292524;
  --sand-900: #1c1917;
}

/* Extend Tailwind config */
@layer utilities {
  .text-terracotta-600 { color: var(--terracotta-600); }
  .text-terracotta-700 { color: var(--terracotta-700); }
  .text-terracotta-400 { color: var(--terracotta-400); }
  .text-terracotta-100 { color: var(--terracotta-100); }
  .bg-terracotta-600 { background-color: var(--terracotta-600); }
  .bg-terracotta-700 { background-color: var(--terracotta-700); }
  .bg-terracotta-100 { background-color: var(--terracotta-100); }
  .bg-terracotta-200 { background-color: var(--terracotta-200); }
  .bg-terracotta-50 { background-color: var(--terracotta-50); }
  .border-terracotta-200 { border-color: var(--terracotta-200); }
  .border-terracotta-400 { border-color: var(--terracotta-400); }
  .shadow-terracotta-200 { box-shadow: 0 10px 40px -10px rgba(234, 88, 12, 0.2); }
  
  .text-sand-700 { color: var(--sand-700); }
  .text-sand-600 { color: var(--sand-600); }
  .bg-sand-700 { background-color: var(--sand-700); }
  .bg-sand-600 { background-color: var(--sand-600); }
  .bg-sand-100 { background-color: var(--sand-100); }
  .bg-sand-200 { background-color: var(--sand-200); }
  .bg-sand-50 { background-color: var(--sand-50); }
}

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

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

::-webkit-scrollbar-track {
  background: var(--sand-100);
}

::-webkit-scrollbar-thumb {
  background: var(--terracotta-300);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--terracotta-500);
}

/* Navbar Scroll Effect */
.navbar-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Animation Classes */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Form Focus Styles */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--terracotta-500) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}

/* Button Hover Effects */
button:hover,
a:hover {
  transition: all 0.3s ease;
}

/* Image Hover Zoom */
img {
  transition: transform 0.3s ease;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}