/* Custom Color Palette */
:root {
    --terracotta-50: #fef7f4;
    --terracotta-100: #fdecd8;
    --terracotta-200: #fad4b0;
    --terracotta-300: #f5b07e;
    --terracotta-400: #ed824a;
    --terracotta-500: #e26028;
    --terracotta-600: #c94f1e;
    --terracotta-700: #a74019;
    --terracotta-800: #853418;
    --terracotta-900: #6d2c16;
    
    --sand-50: #faf8f5;
    --sand-100: #f5f0e8;
    --sand-200: #ebe0ce;
    --sand-300: #dcc7a3;
    --sand-400: #c9a978;
    --sand-500: #b8905a;
    --sand-600: #9c7649;
    --sand-700: #7d5d39;
    --sand-800: #644b30;
    --sand-900: #523f28;
}

/* Tailwind Config */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

/* Custom Animations */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes revealRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.reveal-up {
    animation: revealUp 0.8s ease-out forwards;
}

.reveal-left {
    animation: revealLeft 0.8s ease-out forwards;
}

.reveal-right {
    animation: revealRight 0.8s ease-out forwards;
}

/* Scroll-triggered animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 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-400);
    border-radius: 5px;
}

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

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

/* Form focus styles */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(226, 96, 40, 0.1);
}