/* WARM SURFACES — colour only. Loaded last on every page.
   Retune these four surfaces here. Keep fonts, sizes, spacing and imagery in
   site.css / scw.css / landing.css. All legacy colours now reference these roles. */
:root {
  --surface-1: #f3f0ea; /* light plaster: default page and lighter cards */
  --surface-2: #e8e3da; /* warm sand: alternating sections */
  --surface-3: #d9d1c4; /* mortar: emphasis bands and the property footer */
  --surface-dark: #28251f; /* warm charcoal: strong contrast, never blue-black */
  --text-primary: #2c2924;
  --text-muted: #5e574e;
  --text-on-dark: var(--surface-1);
  --text-muted-on-dark: #c9c1b5;
  --border-subtle: rgba(44, 41, 36, .12);
  --border-on-dark: rgba(243, 240, 234, .16);
  --shadow-soft: rgba(40, 37, 31, .12);
  --transparent: transparent;
  /* Opacities used by existing photo scrims; no new gradients or motion. */
  --light-overlay-10: rgba(243, 240, 234, 0.1);
  --light-overlay-12: rgba(243, 240, 234, 0.12);
  --light-overlay-62: rgba(243, 240, 234, 0.62);
  --light-overlay-90: rgba(243, 240, 234, 0.9);
  --light-overlay-92: rgba(243, 240, 234, 0.92);
  --light-overlay-93: rgba(243, 240, 234, 0.93);
  --light-overlay-94: rgba(243, 240, 234, 0.94);
  --light-overlay-96: rgba(243, 240, 234, 0.96);
  --scrim-02: rgba(40, 37, 31, 0.02);
  --scrim-04: rgba(40, 37, 31, 0.04);
  --scrim-05: rgba(40, 37, 31, 0.05);
  --scrim-06: rgba(40, 37, 31, 0.06);
  --scrim-07: rgba(40, 37, 31, 0.07);
  --scrim-08: rgba(40, 37, 31, 0.08);
  --scrim-10: rgba(40, 37, 31, 0.1);
  --scrim-12: rgba(40, 37, 31, 0.12);
  --scrim-18: rgba(40, 37, 31, 0.18);
  --scrim-20: rgba(40, 37, 31, 0.2);
  --scrim-28: rgba(40, 37, 31, 0.28);
  --scrim-35: rgba(40, 37, 31, 0.35);
  --scrim-42: rgba(40, 37, 31, 0.42);
  --scrim-45: rgba(40, 37, 31, 0.45);
  --scrim-47: rgba(40, 37, 31, 0.47);
  --scrim-50: rgba(40, 37, 31, 0.5);
  --scrim-52: rgba(40, 37, 31, 0.52);
  --scrim-54: rgba(40, 37, 31, 0.54);
  --scrim-55: rgba(40, 37, 31, 0.55);
  --scrim-57: rgba(40, 37, 31, 0.57);
  --scrim-58: rgba(40, 37, 31, 0.58);
  --scrim-59: rgba(40, 37, 31, 0.59);
  --scrim-60: rgba(40, 37, 31, 0.6);
  --scrim-61: rgba(40, 37, 31, 0.61);
  --scrim-62: rgba(40, 37, 31, 0.62);
  --scrim-66: rgba(40, 37, 31, 0.66);
  --scrim-68: rgba(40, 37, 31, 0.68);
  --scrim-70: rgba(40, 37, 31, 0.7);
  --scrim-72: rgba(40, 37, 31, 0.72);
  --scrim-75: rgba(40, 37, 31, 0.75);
  --scrim-76: rgba(40, 37, 31, 0.76);
  --scrim-80: rgba(40, 37, 31, 0.8);
  --scrim-82: rgba(40, 37, 31, 0.82);
  --scrim-86: rgba(40, 37, 31, 0.86);
  --scrim-88: rgba(40, 37, 31, 0.88);
  --scrim-90: rgba(40, 37, 31, 0.9);
  --scrim-91: rgba(40, 37, 31, 0.91);
  --scrim-92: rgba(40, 37, 31, 0.92);
  --scrim-93: rgba(40, 37, 31, 0.93);
  --scrim-94: rgba(40, 37, 31, 0.94);
  --scrim-96: rgba(40, 37, 31, 0.96);
}

/* One neutral vocabulary for both businesses and the supporting pages. */
html, body { background: var(--surface-1); color: var(--text-primary); }
body, body[data-mode], .landing-page, .review-page {
  --bg: var(--surface-1); --text: var(--text-primary); --muted: var(--text-muted);
  --accent: var(--surface-dark); --surface: var(--surface-2); --line: var(--border-subtle);
  --p-paper: var(--surface-1); --p-soft: var(--surface-2); --p-card: var(--surface-1);
  --p-ink: var(--text-primary); --p-muted: var(--text-muted); --p-accent: var(--surface-dark);
  --p-line: var(--border-subtle); --deep: var(--surface-dark); --deep-2: var(--surface-dark);
  --on-deep: var(--text-on-dark); --on-deep-muted: var(--text-muted-on-dark);
}
html, body[data-mode] { scrollbar-color: var(--text-muted) var(--surface-2); }
::selection, body[data-mode] ::selection { background: var(--surface-dark); color: var(--text-on-dark); }
body[data-mode] :focus-visible { outline-color: currentColor; }

/* Page rhythm, top to bottom. The switch is its own shallow mortar band. */
body[data-mode] .site-header,
body[data-mode] .site-header.scrolled { background: var(--surface-1); border-color: var(--transparent); }
body[data-mode] .side-switch-bar { background: var(--surface-3); border-color: var(--transparent); }
body[data-mode] .business-switch { background: var(--surface-1); border-color: var(--border-subtle); }
body[data-mode] .business-switch button { color: var(--text-muted); }
body[data-mode] .business-switch button[aria-selected="true"] { background: var(--surface-dark); color: var(--text-on-dark); }
body[data-mode] #top { background: var(--surface-1); color: var(--text-primary); }
body[data-mode] #services { background: var(--surface-2); }
body[data-mode="auto"] #gallery { background: var(--surface-1); }
body[data-mode="auto"] .commercial-work { background: var(--surface-2); border-color: var(--transparent); }
body[data-mode="auto"] #before-after { background: var(--surface-3); border-color: var(--transparent); }
body[data-mode="auto"] .instagram { background: var(--surface-1); }
body[data-mode="auto"] #reviews { background: var(--surface-dark); }
body[data-mode="auto"] #contact { background: var(--surface-2); border-color: var(--transparent); }
body[data-mode="auto"] .site-footer { background: var(--surface-dark); border-color: var(--transparent); }
body[data-mode="home"] #work { background: var(--surface-dark); }
body[data-mode="home"] .instagram { background: var(--surface-2); }
body[data-mode="home"] #approach { background: var(--surface-1); border-color: var(--transparent); }
body[data-mode="home"] #contact { background: var(--surface-dark); border-color: var(--transparent); }
body[data-mode="home"] .site-footer { background: var(--surface-3); color: var(--text-muted); border-color: var(--transparent); }
body[data-mode="home"] .site-footer .footer-owner,
body[data-mode="home"] .site-footer nav a { color: var(--text-muted); }
body[data-mode="home"] .site-footer nav a:hover { color: var(--text-primary); }
/* Retain border widths to avoid moving content; tone changes replace the visible section rules. */
body[data-mode] .wash-facts { border-color: var(--transparent); }

/* Dark fields inherit an inverse pair. Cards here remain transparent, not white. */
body[data-mode="auto"] #reviews,
body[data-mode="home"] #work,
body[data-mode="home"] #contact {
  --p-ink: var(--text-on-dark); --p-muted: var(--text-muted-on-dark);
  --p-accent: var(--text-on-dark); --p-line: var(--border-on-dark);
  color: var(--text-on-dark);
}
body[data-mode="auto"] #reviews :is(h2, blockquote, .review-score, .review-score strong, .review-stars),
body[data-mode="auto"] #reviews .review-card footer strong,
body[data-mode="home"] #contact :is(h2, .direct-links a, .direct-links strong) { color: var(--text-on-dark); }
body[data-mode="auto"] #reviews :is(.kicker, .review-score span, .review-score small, .review-foot),
body[data-mode="auto"] #reviews .review-card footer :is(small, a),
body[data-mode="auto"] #reviews .review-foot a,
body[data-mode="home"] #contact :is(p, .direct-links span, .direct-links i) { color: var(--text-muted-on-dark); }
body[data-mode="auto"] #reviews .review-card { background: var(--transparent); border-color: var(--border-on-dark); }
body[data-mode="auto"] #reviews .review-card footer { background: var(--transparent); }
body[data-mode="auto"] #reviews .carousel-button { color: var(--text-on-dark); border-color: var(--border-on-dark); }
body[data-mode="auto"] #reviews .review-track { scrollbar-color: var(--text-muted-on-dark) var(--surface-dark); }
body[data-mode="home"] #contact .direct-links,
body[data-mode="home"] #contact .direct-links li { border-color: var(--border-on-dark); }

/* Controls get prominence through contrast, never brand hue. */
body[data-mode] .button-primary,
body[data-mode] #top .button-primary,
.landing-page .button-primary,
.review-page .button-primary { background: var(--surface-dark); color: var(--text-on-dark); }
body[data-mode] .button-primary:hover,
body[data-mode] #top .button-primary:hover,
.landing-page .button-primary:hover,
.review-page .button-primary:hover { background: var(--text-muted); color: var(--text-on-dark); }
body[data-mode] #top :is(h1, .hero-link, .hero-status strong) { color: var(--text-primary); }
body[data-mode] #top :is(.eyebrow, .hero-copy, .hero-status) { color: var(--text-muted); }
body[data-mode] .open-now strong, body[data-mode] .hero-status .open-label { color: var(--text-primary); }
body[data-mode] .open-now::before, body[data-mode] .hero-status::before { background: var(--text-muted); box-shadow: none; }
body[data-mode] .mobile-actions { background: var(--surface-dark); color: var(--text-on-dark); border-color: var(--border-on-dark); }
body[data-mode] .mobile-actions a { color: var(--text-on-dark); border-color: var(--border-on-dark); }
body[data-mode] .mobile-actions a span { color: var(--text-muted-on-dark); }
body[data-mode] .mobile-actions a strong { color: var(--text-on-dark); }

/* Existing price rows stay unboxed on sand; their typography and spacing do not change. */
body[data-mode="auto"] .price-group,
body[data-mode="auto"] .price-group.is-open,
body[data-mode="auto"] .price-card,
body[data-mode="auto"] .price-includes li { background: var(--transparent); border-color: var(--border-subtle); }
.price-toggle-name, .price-toggle-sub { display: block; }
body[data-mode="auto"] .price-toggle-name { color: var(--text-primary); }
body[data-mode="auto"] .price-toggle-sub { color: var(--text-muted); }
body[data-mode="auto"] .price-toggle-mark { background: var(--surface-1); }
body[data-mode="auto"] .price-toggle[aria-expanded="true"] .price-toggle-mark { background: var(--surface-dark); border-color: var(--surface-dark); }
body[data-mode="auto"] .price-jump a:focus-visible,
body[data-mode="auto"] .price-jump a:hover { background: var(--surface-dark); color: var(--text-on-dark); }
body[data-mode="auto"] .comparison-choices button { color: var(--text-muted); }
body[data-mode="auto"] .comparison-choices button[aria-pressed="true"] { color: var(--text-primary); }
body[data-mode="auto"] .ba-grid { background: var(--surface-1); }
.ba-tag { background: var(--surface-dark); color: var(--text-on-dark); }

/* Service landing pages use the same surfaces, within their existing geometry. */
.landing-page, .landing-page.landing-home, .landing-auto { background: var(--surface-1); color: var(--text-primary); }
.landing-page .landing-header { background: var(--surface-2); border-color: var(--transparent); }
.landing-page .landing-hero { background: var(--surface-1); }
.landing-page .landing-intro { background: var(--surface-2); }
.landing-page .landing-services { background: var(--surface-1); border-color: var(--transparent); }
.landing-page .landing-services article { background: var(--surface-2); border-color: var(--border-subtle); }
.landing-page .landing-prices { background: var(--surface-3); border-color: var(--transparent); }
.landing-page .landing-price-col { background: var(--surface-1); border-color: var(--border-subtle); }
.landing-page .landing-faq { background: var(--surface-2); }
.landing-page .landing-cta { background: var(--surface-dark); color: var(--text-on-dark); }
.landing-page .landing-cta :is(p, .kicker) { color: var(--text-muted-on-dark); }
.landing-page .landing-cta .button { background: var(--surface-1); color: var(--text-primary); }
.landing-page footer { background: var(--surface-3); color: var(--text-muted); }
.landing-page .landing-rating span { color: var(--text-primary); }
.landing-page :is(.kicker, .breadcrumbs, .landing-copy p, .landing-services p, .faq-list p) { color: var(--text-muted); }
.landing-page .landing-hero-copy > p:not(.kicker):not(.breadcrumbs) { color: var(--text-muted); }

/* Review / privacy / 404 surfaces, including form inputs and placeholders. */
.review-page { background: var(--surface-1); color: var(--text-primary); }
.review-header { background: var(--surface-2); border-color: var(--transparent); }
.review-hero { background: var(--surface-1); }
.review-main > section:nth-child(2) { background: var(--surface-2); }
.review-page .feedback-card { background: var(--surface-1); border-color: var(--border-subtle); }
.review-page .private-feedback { background: var(--surface-3); border-color: var(--transparent); }
.review-page > footer { background: var(--surface-dark); color: var(--text-muted-on-dark); }
.review-page .enquiry-form { background: var(--transparent); }
.review-page :is(input, textarea, select) { background: var(--surface-1); color: var(--text-primary); border-color: var(--border-subtle); }
.review-page :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }