/* ==========================================================================
   RYAN'S RENOS — LIGHT SKIN (loaded after main.css as #theme-light)
   Warm paper is the default look; image heroes, the top bar, footer and
   other ink sections keep the original dark Ryan's palette.
   The skin switch in the top bar turns this file off (media="not all"),
   which leaves exactly the shared dark design used on Ryan's Decks.
   ========================================================================== */
:root {
  --fg: var(--color-paper-ink);
  --muted: var(--color-paper-muted);
  --line: rgba(20, 18, 16, 0.12);
  --line-strong: rgba(20, 18, 16, 0.24);
  --surface: var(--color-paper-3);
  --surface-2: var(--color-paper-2);
}
body { background: var(--color-paper); color: var(--fg); }

/* Dark contexts keep the original Ryan's palette. */
.hero, .page-hero--image, .statement, .estimator, .aside-card, .site-footer, .topbar, .mobile-cta, .lightbox, .cta-band, .ask, .message-page, .quote {
  --fg: var(--color-white);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
  --surface: var(--color-ink-2);
  --surface-2: var(--color-ink-3);
}
.hero, .page-hero--image, .message-page, .section.quote { color: var(--fg); background-color: var(--color-ink); }
.quote .input { background: var(--color-ink-3); border-color: var(--color-line-strong); color: var(--color-white); }
.section--raised { background: var(--color-paper-3); }
.section--paper { background: var(--color-paper-2); --surface: var(--color-paper-3); --surface-2: var(--color-paper); }

.btn { --btn-border: var(--line-strong); }
.mobile-cta { color: var(--fg); }
.icon-btn, .filter-btn, .jump-nav a, .form-card, .nav-toggle, .choice__box { border-color: var(--line-strong); }
.icon-btn:hover { color: var(--color-on-accent); }

/* Header: a solid paper bar under the black family bar. */
.site-header {
  margin-bottom: 0; color: var(--fg);
  background: rgba(246, 242, 236, 0.92);
  -webkit-backdrop-filter: var(--blur-header); backdrop-filter: var(--blur-header);
  border-bottom-color: var(--line);
}
.site-header.is-scrolled { background: rgba(246, 242, 236, 0.97); border-bottom-color: var(--line); box-shadow: 0 12px 30px -24px rgba(40, 28, 16, 0.5); }
.brand { color: var(--color-paper-ink); }
.site-footer .brand { color: var(--color-white); }
.header-phone { color: var(--fg); }
.ask-trigger { border-color: var(--line-strong); background: var(--color-paper-3); color: var(--muted); }
.ask-trigger:hover { color: var(--fg); border-color: rgba(20, 18, 16, 0.4); background: var(--color-white); }
.ask-trigger__key { border-color: var(--line-strong); color: var(--muted); }
@media (min-width: 1100px) {
  .site-nav__sub { background: var(--color-paper-3); border-color: var(--line); }
  .site-nav__sub a:hover { background: var(--color-paper); }
}
.site-nav__sub a { color: var(--muted); }
.site-nav__sub a:hover, .site-nav__sub a[aria-current] { color: var(--fg); }
@media (max-width: 1099px) {
  .site-nav { background: var(--color-paper); }
  .nav-open.site-header { background: var(--color-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-nav__item { border-bottom-color: var(--line); }
}

/* Inner page heroes sit below the solid header instead of under it. */
.page-hero { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-bottom-color: var(--line); }
.page-hero:not(.page-hero--image):not(.message-page) .page-hero__lead,
.page-hero:not(.page-hero--image):not(.message-page) .hero__eyebrow,
.page-hero:not(.page-hero--image):not(.message-page) .hero__phone small,
.page-hero:not(.page-hero--image):not(.message-page) .breadcrumbs ol,
.page-hero:not(.page-hero--image):not(.message-page) .page-hero__meta,
.page-hero:not(.page-hero--image):not(.message-page) .trust__label { color: var(--muted); }
.page-hero:not(.page-hero--image):not(.message-page) .trust { border-top-color: var(--line-strong); }
@media (min-width: 900px) { .page-hero:not(.page-hero--image) .trust__item + .trust__item { border-left-color: var(--line); } }
.breadcrumbs a:hover, .breadcrumbs [aria-current] { color: var(--fg); }
.page-hero--image .breadcrumbs a:hover, .page-hero--image .breadcrumbs [aria-current] { color: var(--color-white); }

.statement { background: var(--color-ink); color: var(--fg); border-block: 0; }
.step__marker { background: var(--surface); border-color: var(--line-strong); }
.service-card, .area-card, .compare-card, .spec-grid, .post-card, .project-card { box-shadow: var(--shadow-card); }
.service-card, .area-card, .compare-card, .post-card { background: var(--color-paper-3); }

.area-map { background: var(--color-paper-3); border-color: var(--line); }
.area-map__grid { stroke: rgba(20, 18, 16, 0.06); }
.area-map__river { stroke: rgba(110, 135, 160, 0.35); }
.area-map__river-label, .map-dot__label { fill: var(--muted); }
.area-map__legend { color: var(--muted); }
.map-dot__core { fill: var(--color-paper-ink); }
.map-dot.is-active .map-dot__label, .map-dot:hover .map-dot__label { fill: var(--color-paper-ink); }

.family-grid { background: var(--line); border-color: var(--line); }
.family-card { background: var(--color-paper-3); }
.family-card:hover { background: var(--color-paper); }
.family-card--current { background: var(--color-paper-2); }
.family-card__text, .family-hub p { color: var(--muted); }
.family-hub { border-color: var(--line); background: linear-gradient(120deg, var(--color-paper-3), var(--color-paper-2)); }
.family-hub img { filter: invert(1); }

/* Tables and pull-outs on light pages */
.price-table-wrap { background: var(--color-paper-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.5rem 1.25rem 0.25rem; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; }
.input { background: var(--color-white); border-color: var(--line-strong); color: var(--fg); }
.slot-text { color: var(--fg); }