/* Custom Color Palette */
:root {
    --cream-50: #fefdfb;
    --cream-100: #fdf9f5;
    --cream-200: #fbf1e8;
    --cream-300: #f7e6d3;
    
    --brown-50: #f7f3f0;
    --brown-700: #5d4037;
    --brown-800: #4a2c2a;
    --brown-900: #3e2723;
    
    --gold-300: #f9c74f;
    --gold-400: #f8b500;
    --gold-600: #d4941e;
    --gold-700: #b8860b;
}

/* Base Styles */
.bg-cream-50 { background-color: var(--cream-50); }
.bg-cream-100 { background-color: var(--cream-100); }
.bg-cream-200 { background-color: var(--cream-200); }

.bg-brown-50 { background-color: var(--brown-50); }
.bg-brown-700 { background-color: var(--brown-700); }
.bg-brown-800 { background-color: var(--brown-800); }
.bg-brown-900 { background-color: var(--brown-900); }

.bg-gold-100 { background-color: #fdf4e3; }
.bg-gold-600 { background-color: var(--gold-600); }
.bg-gold-700 { background-color: var(--gold-700); }

/* Text Colors */
.text-cream-100 { color: var(--cream-100); }
.text-cream-200 { color: var(--cream-200); }
.text-cream-300 { color: var(--cream-300); }
.text-cream-400 { color: #e8d5c4; }

.text-brown-600 { color: #6d4c41; }
.text-brown-700 { color: var(--brown-700); }
.text-brown-800 { color: var(--brown-800); }
.text-brown-900 { color: var(--brown-900); }

.text-gold-300 { color: var(--gold-300); }
.text-gold-400 { color: var(--gold-400); }
.text-gold-600 { color: var(--gold-600); }

/* Hover States */
.hover\:bg-gold-700:hover { background-color: var(--gold-700); }
.hover\:bg-brown-800:hover { background-color: var(--brown-800); }
.hover\:bg-cream-100:hover { background-color: var(--cream-100); }

.hover\:text-gold-300:hover { color: var(--gold-300); }
.hover\:text-gold-400:hover { color: var(--gold-400); }
.hover\:text-gold-700:hover { color: var(--gold-700); }
.hover\:text-brown-800:hover { color: var(--brown-800); }

/* Border Colors */
.border-cream-100 { border-color: var(--cream-100); }
.border-cream-300 { border-color: var(--cream-300); }
.border-brown-800 { border-color: var(--brown-800); }
.border-gold-600 { border-color: var(--gold-600); }

/* Custom Animations */
.transition-all {
    transition: all 0.3s ease;
}

/* Cookie Banner Styles */
.cookie-consent-banner {
    backdrop-filter: blur(10px);
}

/* Form Styles */
.form-input {
    border: 2px solid #e8d5c4;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background-color: var(--cream-50);
    color: var(--brown-900);
    transition: all 0.3s ease;
}

.form-input:focus {
    border-color: var(--gold-600);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 148, 30, 0.1);
}

.form-label {
    color: var(--brown-800);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

/* Button Enhancements */
.btn-primary {
    background-color: var(--gold-600);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:hover {
    background-color: var(--gold-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 148, 30, 0.3);
}

.btn-secondary {
    border: 2px solid var(--brown-800);
    color: var(--brown-800);
    background: transparent;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn-secondary:hover {
    background-color: var(--brown-800);
    color: var(--cream-100);
}

/* Hero Section Enhancements */
.hero-content {
    position: relative;
    z-index: 10;
}

/* Card Hover Effects */
.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(62, 39, 35, 0.15);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .text-5xl { font-size: 2.5rem; }
    .text-7xl { font-size: 3.5rem; }
    .px-8 { padding-left: 1rem; padding-right: 1rem; }
}

/* Accessibility Improvements */
.focus\:outline-none:focus {
    outline: 2px solid var(--gold-600);
    outline-offset: 2px;
}

/* Loading Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Grid Improvements */
.service-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}