/* Serenity Wellness Clinic - Custom Design System Styles */

:root {
    --color-bg-light: #FAF8F4;
    --color-card-bg: #ffffff;
    --color-teal: #0f766e;
    --color-teal-light: #e6f4f1;
    --color-terracotta: #e8795a;
    --color-charcoal: #1e293b;
    --color-muted: #64748b;
    --color-border: #e2e8f0;
}

body {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--color-bg-light);
    color: var(--color-charcoal);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Header */
.glass-header {
    background: rgba(250, 248, 244, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Card Hover Animations */
.clinic-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.clinic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(15, 118, 110, 0.12);
    border-color: var(--color-teal);
}

/* Custom Handwriting Font Accent */
.font-handwriting {
    font-family: 'Caveat', cursive;
}

/* Filter Tab Button Styles */
.department-tab.active {
    background-color: var(--color-teal);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-light);
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Step Wizard Navigation Dots */
.step-dot.active {
    background-color: var(--color-teal);
    color: #ffffff;
}
.step-dot.completed {
    background-color: #059669;
    color: #ffffff;
}