/* Custom variables */
:root {
    --navy: #0F172A;
    --navy-light: #1E3A8A;
    --warning: #CA8A04;
}

/* Typography Utilities */
.font-serif { font-family: 'Playfair Display', serif; }
.letter-spacing-1 { letter-spacing: 0.1em; }
.letter-spacing-2 { letter-spacing: 0.2em; }

/* Theme Colors */
.text-navy { color: var(--navy); }
.bg-navy { background-color: var(--navy); }

/* Buttons */
.btn-navy { background-color: var(--navy); color: white; transition: all 0.3s; }
.btn-navy:hover { background-color: var(--navy-light); color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(15,23,42,0.3); }
.btn-outline-navy { border: 2px solid var(--navy); color: var(--navy); transition: all 0.3s; }
.btn-outline-navy:hover { background-color: var(--navy); color: white; }

/* Structural Padding */
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }

/* Hover Animations */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; }

.product-card .translate-y-full { transform: translateY(100%); }
.product-card:hover .translate-y-full { transform: translateY(0); }
.transition-all { transition: all 0.3s ease; }

/* Shadows and Blur */
.shadow-xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.backdrop-blur { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.text-shadow-lg { text-shadow: 2px 4px 8px rgba(0,0,0,0.5); }
.text-shadow-md { text-shadow: 1px 2px 4px rgba(0,0,0,0.4); }

/* Custom Animations */
.animate-fade-up { animation: fadeUp 1s ease-out; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
    
.animate-pulse { animation: pulse 2s infinite; }
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.animate-fade-in { animation: fadeIn 0.8s ease-in-out; }
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.animate-slide-up { animation: slideUp 0.6s ease-out forwards; opacity: 0; transform: translateY(20px); }
@keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
}