@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-safari-50: #f0f7f4;
    --color-safari-100: #d9ede6;
    --color-safari-200: #b7d9cc;
    --color-safari-300: #86bca9;
    --color-safari-400: #5a9b85;
    --color-safari-500: #40806b;
    --color-safari-600: #316656;
    --color-safari-700: #2a5346;
    --color-safari-800: #25443a;
    --color-safari-900: #213a32;
    --color-safari-950: #0f211c;

    --color-sand-50: #faf9f6;
    --color-sand-100: #f2f0e8;
    --color-sand-200: #e8e2d4;
    --color-sand-300: #d9ceb5;
    --color-sand-400: #c6b58e;
    --color-sand-500: #b9a279;
    --color-sand-600: #a78d65;
    --color-sand-700: #8b7555;
    --color-sand-800: #726048;
    --color-sand-900: #5e503e;
    --color-sand-950: #312a20;
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.bg-safari-50 { background-color: var(--color-safari-50); }
.bg-safari-100 { background-color: var(--color-safari-100); }
.bg-safari-200 { background-color: var(--color-safari-200); }
.bg-safari-300 { background-color: var(--color-safari-300); }
.bg-safari-400 { background-color: var(--color-safari-400); }
.bg-safari-500 { background-color: var(--color-safari-500); }
.bg-safari-600 { background-color: var(--color-safari-600); }
.bg-safari-700 { background-color: var(--color-safari-700); }
.bg-safari-800 { background-color: var(--color-safari-800); }
.bg-safari-900 { background-color: var(--color-safari-900); }
.bg-safari-950 { background-color: var(--color-safari-950); }

.text-safari-50 { color: var(--color-safari-50); }
.text-safari-100 { color: var(--color-safari-100); }
.text-safari-200 { color: var(--color-safari-200); }
.text-safari-300 { color: var(--color-safari-300); }
.text-safari-400 { color: var(--color-safari-400); }
.text-safari-500 { color: var(--color-safari-500); }
.text-safari-600 { color: var(--color-safari-600); }
.text-safari-700 { color: var(--color-safari-700); }
.text-safari-800 { color: var(--color-safari-800); }
.text-safari-900 { color: var(--color-safari-900); }
.text-safari-950 { color: var(--color-safari-950); }

.bg-sand-50 { background-color: var(--color-sand-50); }
.bg-sand-100 { background-color: var(--color-sand-100); }
.bg-sand-200 { background-color: var(--color-sand-200); }
.bg-sand-300 { background-color: var(--color-sand-300); }
.bg-sand-400 { background-color: var(--color-sand-400); }
.bg-sand-500 { background-color: var(--color-sand-500); }
.bg-sand-600 { background-color: var(--color-sand-600); }
.bg-sand-700 { background-color: var(--color-sand-700); }
.bg-sand-800 { background-color: var(--color-sand-800); }
.bg-sand-900 { background-color: var(--color-sand-900); }
.bg-sand-950 { background-color: var(--color-sand-950); }

.text-sand-50 { color: var(--color-sand-50); }
.text-sand-100 { color: var(--color-sand-100); }
.text-sand-200 { color: var(--color-sand-200); }
.text-sand-300 { color: var(--color-sand-300); }
.text-sand-400 { color: var(--color-sand-400); }
.text-sand-500 { color: var(--color-sand-500); }
.text-sand-600 { color: var(--color-sand-600); }
.text-sand-700 { color: var(--color-sand-700); }
.text-sand-800 { color: var(--color-sand-800); }
.text-sand-900 { color: var(--color-sand-900); }
.text-sand-950 { color: var(--color-sand-950); }

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

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

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
/* Safari-themed button styles */
.btn-safari {
    @apply px-6 py-3 rounded-full font-medium transition-all duration-300;
}

.btn-safari-primary {
    @apply bg-safari-600 text-white hover:bg-safari-700 shadow-md hover:shadow-lg;
}

.btn-safari-outline {
    @apply border-2 border-safari-600 text-safari-600 hover:bg-safari-600 hover:text-white;
}