/* ============================================================
   Dark theme overlay. Loaded AFTER css/style.css on every page.
   To revert to the light theme, remove the theme-dark.css <link>.
   Palette: base #2b2f2e, surfaces #353b39, green band #20392C,
   teal accent #007876 (brightened to #2bb7b4 for text), cream text.
   ============================================================ */
:root { color-scheme: dark; }

html, body { background-color: #20392C; color: #F3E2D4; }

/* ---------- Surfaces ---------- */
.bg-white\/95 { background-color: rgba(38, 42, 41, 0.95); }   /* sticky header + mobile menu */
.bg-white\/90 { background-color: #20392C; }                  /* content sections - green to match bands (no grey alternation) */
.bg-light\/90 { background-color: #20392C; }                  /* alternating green bands */
.bg-light     { background-color: #20392C; }
.bg-gray-50   { background-color: #3a403e; }                  /* value cards */
.bg-white     { background-color: #353b39; }                  /* generic white cards */
.service-card, .review-card { background-color: #353b39; }
.map-container { background-color: #20392C; }

/* ---------- Text ---------- */
.text-dark    { color: #F3E2D4; }
.text-primary { color: #F3E2D4; }                             /* headings legible on dark */
.text-gray-700, .text-gray-600, .text-gray-500 { color: #b7c0bb; }
.text-accent  { color: #2bb7b4; }                             /* brighter teal for contrast */

/* ---------- Borders / dividers ---------- */
.border-gray-700 { border-color: #46504b; }

/* ---------- CTA buttons: teal fill so they pop on dark ----------
   Section bands use bg-primary/90 (kept green); rounded bg-primary
   are the buttons, so target those specifically.                  */
.bg-primary.rounded-xl,
.bg-primary.rounded-full { background-color: #007876; }
.bg-primary.rounded-xl:hover,
.bg-primary.rounded-full:hover { background-color: #00928f; }

/* ---------- Footer ---------- */
footer.bg-dark { background-color: #232726; }