/* ==========================================================================
   VILLAGE REALTY
   base.css, fonts, design tokens, resets, base elements, utilities
   ========================================================================== */
:root{
  /* Brand palette (Brand Guidelines v1.1, 2026)
     Cream leads, Ink for type, Peacock as accent, Stone for detail. */
  --vr-ink:       #1F2A2E;  /* deep ink, authority + type + dark sections */
  --vr-peacock:   #234E60;  /* confidence + trust, single accent */
  --vr-canvas:    #F3EDE2;  /* soft cream page canvas */
  --vr-ivory:     #F8F4EC;  /* lighter neutral, cards */
  /* Darkened from the guide's #72736F, which measured 4.10:1 on cream and
     3.65:1 on sand: below the 4.5:1 AA floor at the sizes stone actually
     runs at (eyebrows, stat labels, the logo's region line are all 9-12px).
     This is 5.12:1 and 4.56:1 on the same two grounds. Same warm neutral,
     one step deeper. Flag to VR as a v1.1 amendment. */
  --vr-stone:     #636460;  /* muted detail */
  --vr-peacock-rgb: 35,78,96;  /* for translucent washes */

  /* Peacock is a light-ground accent. On Ink and photographic grounds it drops
     below legible contrast, so reversed surfaces take Ivory instead, matching
     the guide's reversed lockup. */
  --vr-accent-inverse: var(--vr-ivory);

  /* Semantic aliases (keep existing class names working) */
  --vr-cream:    var(--vr-canvas);
  --vr-sand:     #EAE0D0;      /* deeper canvas band for section contrast */
  --vr-teal:     var(--vr-ink);       /* legacy name -> Ink */
  --vr-blush:    var(--vr-peacock);   /* legacy name -> Peacock */
  --vr-charcoal: #2A353B;      /* soft ink for body copy */
  --vr-line:     #E3D8C7;      /* warm hairline */

  /* Type */
  --vr-serif:  'Cormorant Garamond', Georgia, 'Palatino Linotype', serif;
  --vr-script: 'Cormorant Garamond', Georgia, serif; /* italic accent (script retired) */
  --vr-ui:     'Montserrat', 'Century Gothic', -apple-system, Helvetica, Arial, sans-serif;

  /* Height of the header's main bar once it pins (header.css). Lives here
     because anchor targets have to clear it site-wide, not just the header. */
  --vr-header-pinned: 84px;

  /* Layout */
  --vr-maxw: 1200px;
  --vr-radius: 4px;
  --vr-section-y: clamp(56px, 8vw, 88px);
  --vr-gutter: clamp(24px, 5vw, 48px);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--vr-serif); color:var(--vr-charcoal); background:var(--vr-cream);
  line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block; max-width:100%;}
a{color:inherit;}
::selection{background:var(--vr-blush); color:#fff;}
:focus-visible{outline:2px solid var(--vr-teal); outline-offset:2px;}

.vr-wrap{max-width:var(--vr-maxw); margin:0 auto; padding-inline:var(--vr-gutter);}

/* Anything an in-page link can target stops below the pinned header instead of
   underneath it. Sections that want more room (the CTA form band) set their own
   scroll-margin-top in their own stylesheet, which loads later and wins. */
[id]{scroll-margin-top:calc(var(--vr-header-pinned) + 12px);}

@media (max-width:980px){
  :root{--vr-header-pinned:62px;}
}

/* ============ SHARED UI ============ */
.vr-eyebrow{
  font-family:var(--vr-ui); font-weight:500; font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--vr-stone); margin-bottom:1rem;
}
.vr-eyebrow--light{color:rgba(255,255,255,.85);}
.vr-eyebrow--center{text-align:center;}
.vr-script{font-family:var(--vr-serif); font-style:italic; font-weight:500; font-size:clamp(1.7rem,3.2vw,2.3rem); letter-spacing:.01em; color:var(--vr-peacock); line-height:1.1;}

.vr-btn{
  display:inline-block; font-family:var(--vr-ui); font-weight:500; font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  padding:.95em 2.4em; border-radius:var(--vr-radius); border:1px solid transparent;
  transition:all .25s ease; cursor:pointer;
}
.vr-btn--blush{background:var(--vr-blush); color:#fff;}
.vr-btn--blush:hover{background:var(--vr-teal);}
.vr-btn--outline{background:transparent; color:var(--vr-teal); border-color:var(--vr-teal);}
.vr-btn--outline:hover{background:var(--vr-teal); color:#fff;}
.vr-btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7);}
.vr-btn--ghost:hover{background:#fff; color:var(--vr-teal); border-color:#fff;}