/* Clinic theme — retunes Nocturne's tonal system to a warm cream-and-sage
   palette for Raeya Women's Clinic. Ramps are inverted end-for-end
   (100 darkest … 900 lightest) so every documented step keeps its role;
   sage sits in the accent slot; Bitter pairs with Nunito Sans. Steps
   300/500 hold 4.5:1 contrast against the cream field. */
:root {
  --color-bg: #f5f1e8;
  --color-surface: #efe9dc;
  --color-text: #2b2620;
  --color-accent: #6f8f61;
  --color-divider: color-mix(in srgb, #2b2620 13%, transparent);

  --color-neutral-100: #2b2620;
  --color-neutral-200: #433d34;
  --color-neutral-300: #5c5448;
  --color-neutral-400: #6b6256;
  --color-neutral-500: #6b6256;
  --color-neutral-600: #b5ab99;
  --color-neutral-700: #d3cbba;
  --color-neutral-800: #e6dfd0;
  --color-neutral-900: #f1ebdf;

  --color-accent-100: #26331f;
  --color-accent-200: #3a4d30;
  --color-accent-300: #4f6a44;
  --color-accent-400: #6f8f61;
  --color-accent-500: #8aa87c;
  --color-accent-600: #a8c09b;
  --color-accent-700: #c6d7bc;
  --color-accent-800: #dfe8d8;
  --color-accent-900: #f0f4ec;

  --color-accent-2-100: #26331f;
  --color-accent-2-200: #3a4d30;
  --color-accent-2-300: #4f6a44;
  --color-accent-2-400: #6f8f61;
  --color-accent-2-500: #8aa87c;
  --color-accent-2-600: #a8c09b;
  --color-accent-2-700: #c6d7bc;
  --color-accent-2-800: #dfe8d8;
  --color-accent-2-900: #f0f4ec;

  --font-heading: "Bitter", Georgia, serif;
  --font-heading-weight: 500;
  --font-body: "Nunito Sans", system-ui, sans-serif;

  --shadow-sm: 0 0 0 1px #e6dfd0;
  --shadow-md: 0 0 0 1px #e6dfd0, 0 6px 18px rgba(43, 38, 32, 0.08);
  --shadow-lg: 0 0 0 1px #d3cbba, 0 16px 40px rgba(43, 38, 32, 0.14);
}

/* This theme fills its primary action rather than outlining it. */
.btn-primary { background: var(--color-accent-300); border-color: var(--color-accent-300); color: #fbf9f4; }
.btn-primary:hover { background: var(--color-accent-200); border-color: var(--color-accent-200); }
.btn-primary:active { background: var(--color-accent-100); border-color: var(--color-accent-100); }
.btn-ghost { color: var(--color-accent-300); }

html, body { margin: 0; padding: 0; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }

.om-fade-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}

.wrap { max-width: 900px; margin: 0 auto; padding-left: var(--space-8); padding-right: var(--space-8); }

.nav-text-link { color: var(--color-neutral-300); text-decoration: none; }
.nav-text-link:hover { color: var(--color-accent-300); }

.phone-link { color: inherit; text-decoration: none; }
.phone-link:hover { color: var(--color-accent-300); }

.maps-link { color: var(--color-accent-300); }

.doctor-photo {
  aspect-ratio: 3 / 4; border-radius: var(--radius-md); background: var(--color-surface);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.map-frame { margin-top: calc(var(--space-8) * 2); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; filter: saturate(0.7); }