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

/* Color Palette Definitions */
: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;
}

/* Custom Tailwind Config */
tailwind.config = {
  theme: {
    extend: {
      colors: {
        terracotta: {
          50: '#fff7ed',
          100: '#ffedd5',
          200: '#fed7aa',
          300: '#fdba74',
          400: '#fb923c',
          500: '#f97316',
          600: '#ea580c',
          700: '#c2410c',
          800: '#9a3412',
          900: '#7c2d12',
        },
        sand: {
          50: '#fafaf9',
          100: '#f5f5f4',
          200: '#e7e5e4',
          300: '#d6d3d1',
          400: '#a8a29e',
          500: '#78716c',
          600: '#57534e',
          700: '#44403c',
          800: '#292524',
          900: '#1c1917',
        }
      },
      fontFamily: {
        sans: ['DM Sans', 'sans-serif'],
        serif: ['Playfair Display', 'serif'],
      },
      animation: {
        'blob': 'blob 7s infinite',
        'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
      },
      keyframes: {
        blob: {
          '0%': { transform: 'translate(0px, 0px) scale(1)' },
          '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
          '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
          '100%': { transform: 'translate(0px, 0px) scale(1)' },
        },
        fadeInUp: {
          '0%': { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        }
      }
    }
  }
}

/* Animation Delays */
.animation-delay-200 {
  animation-delay: 200ms;
}
.animation-delay-400 {
  animation-delay: 400ms;
}
.animation-delay-600 {
  animation-delay: 600ms;
}
.animation-delay-800 {
  animation-delay: 800ms;
}

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #fafaf9; /* stone-50 */
}

/* Navbar Scroll Effect */
.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f5f5f4;
}
::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}

/* Focus Styles */
a:focus-visible, button:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile Menu Transitions */
#mobile-menu {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}