/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Inter:wght@300;400;500;600&display=swap');

/* Variables */
:root {
    --emerald-50: #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --emerald-800: #065f46;
    --emerald-900: #064e3b;
    --emerald-950: #022c22;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #fcfaf8; 
    color: #1c1917; 
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--emerald-950); }
a { text-decoration: none; color: inherit; }

/* Layout Containers */
.max-w-6xl { max-width: 1200px; margin: 0 auto; }
.max-w-5xl { max-width: 1000px; margin: 0 auto; }
.max-w-xl { max-width: 600px; margin: 0 auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing System */
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

/* Responsive Grid & Flex */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-12 { gap: 3rem; }
.grid { display: grid; gap: 1.5rem; }

/* Mobile-First Grid Adjustments */
@media (max-width: 767px) {
    .gap-12 { gap: 2rem; }
    .text-5xl { font-size: 2.5rem !important; }
    .text-6xl { font-size: 3rem !important; }
}

@media (min-width: 768px) {
    .md\:p-12 { padding: 3.5rem; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Utilities & Decor */
.bg-white { background-color: #ffffff; }
.bg-stone-100 { background-color: var(--stone-100); }
.bg-red-50 { background-color: #fef2f2; }
.border { border: 1px solid var(--stone-200); }
.border-b { border-bottom: 1px solid var(--stone-200); }
.border-stone-100 { border-color: var(--stone-100); }
.border-red-100 { border-color: #fee2e2; }

.rounded-md { border-radius: 0.375rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1.25rem; }
.rounded-full { border-radius: 9999px; }

.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.transition { transition: var(--transition); }

/* Typography */
.text-xs { font-size: 0.75rem; font-weight: 600; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3.5rem; }
.text-6xl { font-size: 4.5rem; }

.text-emerald-600 { color: var(--emerald-600); }
.text-emerald-800 { color: var(--emerald-800); }
.text-emerald-900 { color: var(--emerald-900); }
.text-emerald-950 { color: var(--emerald-950); }
.text-stone-400 { color: var(--stone-400); }
.text-stone-500 { color: var(--stone-500); }
.text-stone-600 { color: var(--stone-600); }
.text-stone-700 { color: var(--stone-700); }
.text-red-800 { color: #991b1b; }
.text-red-900 { color: #7f1d1d; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-light { font-weight: 300; }
.font-serif { font-family: 'Playfair Display', serif; }
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.15em; }
.leading-relaxed { line-height: 1.8; }
.text-center { text-align: center; }

/* Interactive Elements */
.hover\:bg-emerald-50:hover { background-color: var(--emerald-50); }
.hover\:text-emerald-700:hover { color: var(--emerald-700); }
.hover\:border-emerald-300:hover { border-color: var(--emerald-100); background: #fff; }
.hover\:shadow-md:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }

/* Search Input Styling */
input[name="q"] {
    width: 100%;
    outline: none;
    border: 1px solid var(--stone-200);
    transition: var(--transition);
}
input[name="q"]:focus {
    border-color: var(--emerald-600);
    box-shadow: 0 0 0 4px var(--emerald-50);
}

/* Glassmorphism for Nav */
nav.sticky {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}