:root {
  color-scheme: light;
  --bg-canvas: #F8FAFC;
  --bg-surface: #FFFFFF;
  --border-light: #E2E8F0;
  --ink-primary: #0F172A;
  --ink-muted: #475569;
  --teal-accent: #0D9488;
  --teal-dark: #0F766E;
}

body {
  background-color: var(--bg-canvas);
  color: var(--ink-primary);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

.clinic-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.clinic-card:hover {
  border-color: rgba(13, 148, 136, 0.4);
  box-shadow: 0 18px 38px -22px rgba(15, 23, 42, 0.16);
}

.btn-teal {
  background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(13, 148, 136, 0.6);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.btn-teal:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.bg-clinic-dots {
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}