/* Direction: a calm family clinic — warm ivory paper, deep healing teal, a caring serif */

:root {
  --canvas: #f7f5ef;
  --surface: #ffffff;
  --surface-2: #efede6;
  --border: #dfddd3;
  --border-strong: #b9b6a9;
  --ink: #16322e;
  --muted: #5b6d69;
  --accent: #0f766e;
  --accent-hover: #0c625b;
  --accent-ink: #ffffff;
  --accent-text: #0b5d57;
  --accent-strong: #0a4f49;
  --accent-soft: #e2efec;
  --accent-border: #a9cfc9;
  --success: #157a48;
  --success-ink: #ffffff;
  --success-soft: #dfece4;
  --success-strong: #0f6b3d;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6da;
  --warning-strong: #a64c08;
  --danger: #b3382c;
  --danger-ink: #ffffff;
  --danger-soft: #f2e0dd;
  --danger-strong: #a02f24;
  --chart-1: #0f766e;
  --chart-2: #b0702c;
  --chart-3: #5a4a8a;
  --chart-4: #7a3350;
  --chart-5: #3c6b8a;
  --chart-6: #6d7a2c;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 999px;
  --radius-card: 18px;
  --radius-input: 10px;
  --shadow-card: 0 12px 32px rgb(22 50 46 / 8%);
  --card-pad: 28px;
  --btn-weight: 600;

  --gradient-hero: linear-gradient(180deg, #eaf1ee 0%, #f7f5ef 100%);
  --x-band: #0c2b28;
  --x-on-photo: #ffffff;
}

html[data-theme="dark"] {
  --canvas: #0e1d1b;
  --surface: #152724;
  --surface-2: #1c322e;
  --border: #2a423d;
  --border-strong: #49645e;
  --ink: #eef4f1;
  --muted: #a3b8b2;
  --accent: #3fbeb0;
  --accent-hover: #58cabe;
  --accent-ink: #08211e;
  --accent-text: #8fd8cd;
  --accent-strong: #9fe0d6;
  --accent-soft: #1d3a35;
  --accent-border: #2f544d;
  --success: #3ba46b;
  --success-ink: #06130c;
  --success-soft: #1a3327;
  --success-strong: #7cc79b;
  --warning: #c87f2f;
  --warning-ink: #170e04;
  --warning-soft: #3a2b17;
  --warning-strong: #d9a15f;
  --danger: #c4574a;
  --danger-ink: #170605;
  --danger-soft: #3a1f1c;
  --danger-strong: #d98a80;
  --chart-1: #58cabe;
  --chart-2: #d19a5e;
  --chart-3: #9a8cc9;
  --chart-4: #c4708f;
  --chart-5: #6fa3c4;
  --chart-6: #a3ad6d;

  --gradient-hero: linear-gradient(180deg, #122522 0%, #0e1d1b 100%);
}

/* Sharma Dental Care — app-specific touches */

/* filled review stars */
.stars .icon {
  fill: currentColor;
}

/* dotted texture on the dark band */
.band-dots {
  background-image: radial-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* service rows lift gently */
.service-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

/* hero badge drifts */
.float-badge {
  animation: floaty 5s ease-in-out infinite alternate;
}
@keyframes floaty {
  from {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .float-badge {
    animation: none;
  }
}