/* theme.css V002 | color layer for the whole site, loaded last. V001 (Oct 7) reproduced the old beige look; V002 (Oct 8) is Jorge's
   black and white ruling below. Change the tokens in :root, not the rules. */
:root{
  /* V002 (Jorge 2026-10-08): "mostly black and white to mirror Compass in terms of theme, with little hints of color elsewhere,
     like the green and the beige. But otherwise, simple." Color only where Redfin uses it: the calculator bar and dots. */
  --t-dark:#1a1a1a;      /* solid buttons, tour button, dark sections */
  --t-dark2:#000;        /* hover for --t-dark */
  --t-sec:#1a1a1a;       /* the dark Explore section */
  --t-mid:#f7f5f2;       /* newsletter band (mist, his pick over cream) */
  --t-mid-ink:#1a1a1a;   /* text on --t-mid */
  --t-mid-line:#cfc9bf;  /* input lines on --t-mid */
  --t-mid-ph:#8a8378;    /* placeholders on --t-mid */
  --t-band:#1a1a1a;      /* the search band under the hero */
  --t-btn:#1a1a1a;       /* site buttons (.btn) */
  --t-btn2:#000;
  --t-soft:#f7f5f2;      /* soft section background (was cream) */
  --t-pale:#f4f4f2;      /* fact tiles, table headers */
  --t-hi-pale:#eff3ee;   /* "Est. /mo" pill, pale site green */
  --t-hi-ink:#3e5445;    /* text on the pale green */
  --t-star:#b4aea4;      /* review stars, brand beige */
  --t-c1:#95DEE4; --t-c2:#3B98ED; --t-c3:#F3DC81; --t-c4:#FD9C81; /* calculator bar and dots, Redfin style */
  --t-tab:#1a1a1a;       /* active tab underline on a home page */
}
.btn{background:var(--t-btn);border-color:var(--t-btn)}
.btn:hover{background:var(--t-btn2);border-color:var(--t-btn2)}
.btn--line{background:transparent;color:var(--t-dark);border-color:var(--t-dark)}
.btn--line:hover{background:var(--t-dark);color:#fff;border-color:var(--t-dark)}
.btn--light{background:transparent;color:#fff;border-color:#fff}
.btn--light:hover{background:#fff;color:var(--t-dark)}
.sband{background:var(--t-band)}
.sec--dark{background:var(--t-sec)}
.sec--beige{background:var(--t-mid);color:var(--t-mid-ink)}
.sec--beige h2,.sec--beige h3,.sec--beige .card h4{color:var(--t-mid-ink)}
.sec--beige .card{color:var(--t-mid-ink);border-color:var(--t-mid-line)}
.sec--beige .form input,.sec--beige .form textarea{color:var(--t-mid-ink);border-color:var(--t-mid-line)}
.sec--beige .form input::placeholder,.sec--beige .form textarea::placeholder{color:var(--t-mid-ph)}
.sec--beige .consent{color:var(--t-mid-ph)}
.sec--cream{background:var(--t-soft)}
.qs-band{background:var(--t-soft)!important}
.sec--beige .btn{background:var(--t-dark);border-color:var(--t-dark)}
.qcard__stars{color:var(--t-star)}
.hd .btn:not(.btn--line){background:var(--t-dark);border-color:var(--t-dark)}
.hd .btn--line{border-color:var(--t-dark);color:var(--t-dark)}
.hd .btn--line:hover{background:var(--t-dark);color:#fff}
.hd-tourbtn{background:var(--t-dark)}
.hd-tourbtn:hover{background:var(--t-dark2)}
.hd-contactbtn{border-color:var(--t-dark);color:var(--t-dark)}
.hd-contactbtn:hover{background:var(--t-dark);color:#fff}
.hd-nav__links a.on,.hd-nav__links a:hover{border-bottom-color:var(--t-tab)}
.hd-tiles div{background:var(--t-pale)}
.pi h3{background:var(--t-pale)}
.hd-est{background:var(--t-hi-pale);color:var(--t-hi-ink)}
.c1{background:var(--t-c1)}.c2{background:var(--t-c2)}.c3{background:var(--t-c3)}.c4{background:var(--t-c4)}
.pc__in input[type=range],.offr__radios input,.offr__q input,.offr__amt input[type=range]{accent-color:var(--t-dark)}
.offr__next{background:var(--t-dark)}
.offr__next[disabled]{background:#9a9a9a}
.nav ul a:hover{background:var(--t-pale)}
.hd-loan{background:var(--t-soft)}
.form .ok{background:var(--t-soft)}
