/* ============================================================
   PRO DENTAL — WHITE & RED theme (live design)
   True logo red #c2232d on clean white surfaces.
   Loaded AFTER styles.css — overrides variables + surfaces.
   ============================================================ */

:root {
  --paper: #ffffff;
  --paper-2: #fff7f7;
  --card: #ffffff;
  --line: #f3dadd;
  --ink: #241a1b;
  --ink-2: #5a4749;
  --teal: #c2232d;
  --teal-deep: #a01a24;
  --teal-soft: #fbe9ea;
  --terra: #c2232d;
  --terra-ink: #a01a24;
  --dark: #241417;
  --dark-2: #180d0f;
  --sand: #ffffff;
  --sand-dim: rgba(255, 255, 255, 0.62);
}

/* --- white surfaces on light sections (hard-coded tints) --- */
.hero { background: #ffffff; }
.trust { background: #ffffff; }
#services { background: #ffffff; }
/* .journey keeps dark bg from .section--dark */
#prices { background: #ffffff; }
#clinic { background: linear-gradient(180deg, #ffffff 0%, #fff6f6 100%); }
#reviews { background: #ffffff; }
#faq { background: #ffffff; }
.svc:hover { background: #fff8f8; }
.svc.is-open { background: #fff8f8; }
.docs { border-color: #f0d8da; }
.docs__quote { border-color: #f0d8da; }
.review--featured { background: linear-gradient(135deg, #fff8f8 0%, #fdeff0 100%); border-color: #f3d9dc; }
.review--featured::before { color: rgba(194, 35, 45, 0.1); }
.footer { background: #241417; }

/* --- hardcoded bone surfaces from base css -> white --- */
.header { background: rgba(255, 255, 255, 0.88); }
.mbar { background: rgba(255, 255, 255, 0.92); }

/* --- cream text on dark sections -> warm white with rose tint --- */
.section-head--dark h2, .journey__step h3, .cta-band__text h2, .footer__name, .footer__col h4 { color: #fdf1f2; }
.cta-band { color: #f3e6e7; }
.cta-band__text p { color: rgba(253, 241, 242, 0.8); }
.journey__step p, .section-head--dark p { color: rgba(253, 241, 242, 0.72); }

/* --- red accents & shadows --- */
.btn--primary { box-shadow: 0 10px 24px rgba(194, 35, 45, 0.26); }
.btn--primary:hover { box-shadow: 0 14px 30px rgba(194, 35, 45, 0.32); }
.hero__hours { box-shadow: 0 16px 34px rgba(194, 35, 45, 0.3); }
.mbar__btn--primary { box-shadow: 0 8px 20px rgba(194, 35, 45, 0.28); }
.hero__hours--open { background: #c2232d; }

/* --- dark sections: deep red-tinted charcoal --- */
.journey { color: #f5ecec; }

/* --- real brand logo in header/footer --- */
.brand__mark { background: transparent; }
.brand__mark img { width: 30px; height: 30px; display: block; }