/* ==========================================================================
   Residential theme — "Roofline Modern" (Concept F)
   Load AFTER base.css. Defines the token contract + the few rules that
   don't tokenize cleanly (gradients, slider-handle shape) + residential-only
   decorative components (roofline divider, swatch-tag portfolio caption).
   ========================================================================== */

:root {
  --bg: #FBF3E3;
  --surface: #FFFFFF;
  --surface-alt: #211A12;
  --ink: #211A12;
  --text: #4A3D2C;
  --on-media: #FBF3E3;

  --accent: #E6B965;
  --accent-deep: #7A5A16;
  --accent-hover: #FBF3E3;
  --brick: #D73428;
  --brick-dark: #B32A1F;
  --line: rgba(33, 26, 18, 0.14);

  --ghost-border: var(--ink);
  --ghost-color: var(--ink);
  --ghost-hover-bg: var(--ink);
  --ghost-hover-color: var(--bg);
  --ghost-media-border: rgba(251, 243, 227, 0.55);
  --ghost-media-hover-bg: rgba(251, 243, 227, 0.14);

  --header-bg: rgba(251, 243, 227, 0.9);
  --why-accent: var(--brick);
  --quote-bg: var(--accent);
  --quote-border: none;
  --quote-text: var(--ink);

  --radius-btn: 999px;
  --radius-card: 20px;
  --cta-radius: 28px;
  --cta-margin: 0 24px;
  --cta-border: none;
  --focus-ring: 3px solid var(--brick);
  --handle-width: 6px;

  --font-display: 'Sora', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* documented exceptions — gradients that don't tokenize cleanly */
.hero__scrim {
  background: linear-gradient(180deg, rgba(14,10,6,0.62) 0%, rgba(14,10,6,0.72) 100%);
}
.hero__scrim::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 620px 340px at 50% 46%, rgba(10,7,4,0.4) 0%, rgba(10,7,4,0) 72%);
}
.page-hero__scrim {
  background: linear-gradient(120deg, rgba(14,10,6,0.88) 10%, rgba(14,10,6,0.5) 100%);
}

/* phones: inner-page banner photo fades into the dark surface behind the copy (see base.css) */
@media (max-width: 700px) {
  .page-hero__scrim {
    background: linear-gradient(180deg, transparent 0%, transparent 42%, color-mix(in srgb, var(--surface-alt) 72%, transparent) 76%, var(--surface-alt) 100%);
  }
}
/* phones: the photo fades into the dark surface behind the copy (see base.css) */
@media (max-width: 700px) {
  .hero__scrim {
    background: linear-gradient(180deg, rgba(33,26,18,0) 0%, rgba(33,26,18,0) 42%, rgba(33,26,18,0.72) 78%, var(--surface-alt) 100%);
  }
  .hero__scrim::after { display: none; }
}
.acc-panel__scrim {
  background: linear-gradient(200deg, rgba(20,15,9,0.12) 0%, rgba(20,15,9,0.88) 100%);
}
.ba-slider__handle::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 42px; border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(33,26,18,0.35);
  transform: translate(-50%, -50%);
}

/* residential-only decorative components */
.roofline-divider {
  height: 34px;
  background:
    linear-gradient(135deg, transparent 50%, var(--brick) 50%) 0 0/40px 34px repeat-x,
    linear-gradient(-135deg, transparent 50%, var(--accent) 50%) 20px 0/40px 34px repeat-x;
}
@media (max-width: 520px) {
  .roofline-divider {
    height: 22px;
    background:
      linear-gradient(135deg, transparent 50%, var(--brick) 50%) 0 0/26px 22px repeat-x,
      linear-gradient(-135deg, transparent 50%, var(--accent) 50%) 13px 0/26px 22px repeat-x;
  }
}

.swatch-tag { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 18px; background: var(--surface); border-radius: 999px; box-shadow: 0 10px 22px -18px rgba(33,26,18,0.5); }
.swatch-tag__icon { width: 28px; height: 24px; flex-shrink: 0; }
.swatch-tag__icon .roofline-mark__back { color: var(--accent); opacity: 0.7; }
.swatch-tag__icon .roofline-mark__front { color: var(--brick); }
.swatch-tag__text { display: flex; flex-direction: column; font-size: 0.82rem; color: var(--text); opacity: 0.8; }
.swatch-tag__text strong { font-weight: 700; color: var(--ink); font-size: 0.9rem; opacity: 1; }
.swatch-tag__date { font-size: 0.72rem; opacity: 0.65; }

/* residential-only cross-link badge (previews the dark commercial theme) */
.nav-crosslink--commercial { background: #211A12; color: #E6B965; border: 1px solid #7A5A16; }