/* Modern Spa Palette - Updated to PediCare Brand Colors */
:root {
    --navy-900: #1A364E;
    --teal-500: #58B0B4;
    --teal-600: #4a9497;
    --gold-500: #B89D5E;
    --charcoal: #333333;
    --off-white: #FAF9F6;
    --teal-100: #eef7f8;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--charcoal);
}

h1, h2, h3, .font-serif {
    font-family: 'Playfair Display', serif;
    color: var(--navy-900);
}

.nav-link {
    font-weight: 500;
    color: var(--charcoal);
    position: relative;
    padding-bottom: 4px;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--teal-500);
    transition: width 0.3s;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.service-card {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-card:hover {
    transform: translateY(-8px);
}

.booking-active {
    border-color: var(--teal-500) !important;
    background-color: var(--teal-100);
}

/* Calendar widget */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    padding: 12px 0;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
}

.calendar-day:hover:not(.disabled) {
    background: var(--teal-100);
}

.calendar-day.selected {
    background: var(--navy-900);
    color: white;
}

.calendar-day.disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}

.testimonial-card {
    transition: opacity 0.5s;
}

/* Form focus states */
input:focus, textarea:focus {
    border-color: var(--teal-500) !important;
    ring-color: var(--teal-500) !important;
}

/* Page Transitions */
#mobile-menu.active {
    transform: translateX(0);
}

/* Custom Utils for Tailwind Overrides */
.bg-navy-900 { background-color: var(--navy-900); }
.text-navy-900 { color: var(--navy-900); }
.bg-teal-500 { background-color: var(--teal-500); }
.text-teal-500 { color: var(--teal-500); }
.border-teal-500 { border-color: var(--teal-500); }
.hover\:bg-teal-600:hover { background-color: var(--teal-600); }
.fill-gold-500 { fill: var(--gold-500); }
.text-gold-500 { color: var(--gold-500); }