:root {
    --ink: #0f172a;
    --ink-2: #0c4a6e;
    --brand: #0284c7;
    --tint: #e0f2fe;
    --paper: #f8fafc;
    --accent-glucose: #f97316;
}

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

.font-display {
    font-family: 'Fraunces', serif;
}

/* Hero credential line reveal — the one deliberate motion on the page */
.credential-line {
    opacity: 0;
    transform: translateY(10px);
}

.reduce-motion .credential-line {
    opacity: 1;
    transform: none;
}

/* Glucose-ring motif: a single small SVG accent behind the doctor photo, not repeated elsewhere */
.glucose-ring {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Chamber timeline (a real sequence — the doctor's weekly visiting order) */
.chamber-timeline {
    position: relative;
}

.chamber-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--tint);
}

@media (min-width: 768px) {
    .chamber-timeline::before {
        left: 50%;
        transform: translateX(-1px);
    }
}

.chamber-dot {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: var(--brand);
    border: 4px solid var(--paper);
    box-shadow: 0 0 0 2px var(--brand);
}

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Booking modal */
#booking-modal {
    backdrop-filter: blur(2px);
}

.step-indicator {
    display: flex;
    gap: 6px;
}

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #cbd5e1;
}

.step-dot.active {
    background: var(--brand);
    width: 20px;
    border-radius: 9999px;
}

.wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
}