/* ============================================================
   TOKENS — single source of truth for the theme.
   Change a value here and it updates everywhere on the site.
   Nothing else in the CSS should contain a raw colour or size.

   Palette: "quarried stone". Warm graphite grounds, limestone
   neutrals, one ochre accent. Deliberately NEUTRAL-grounded:
   site #1 is green, #2 iron blue, #3 red — all hued. A
   rank-and-rent portfolio that reads as one template is a
   network footprint, so #4 takes the open lane.
   ============================================================ */
:root{
  /* ---- brand palette: warm graphite ---- */
  --brand:#2B2723;         /* graphite — headers, dark sections */
  --brand-dk:#1B1815;      /* deeper graphite — hovers, scrims, footer */
  --brand-md:#463F38;      /* mid graphite — borders, hover states */
  --brand-lt:#EAE5DD;      /* pale limestone — icon plates */

  /* --accent carries TEXT (links, prices) as well as button fills, so it is the
     darker ochre: #C08A2E is only ~2.6:1 on white and fails as text. The bright
     ochre from the mockup lives in --zest, which is used on dark grounds. */
  --accent:#9A6A16;        /* ochre — primary CTAs, prices, links */
  --accent-dk:#7E5510;     /* ochre hover */
  --accent-lt:#F5EDE0;     /* pale ochre — icon plates */
  --ruby:#A2542A;          /* clay — decorative only */

  --zest:#C08A2E;          /* bright ochre — stats, CTAs on dark */
  --zest-lt:#F7EEDD;

  /* ---- surfaces & text ---- */
  --bg:#FFFFFF;            /* page background */
  --cream:#EEEBE5;         /* limestone — alternating section surface */
  --ink:#211E1A;           /* body text */
  --muted:#6B655D;         /* secondary text */
  --line:#DED9D0;          /* borders & rules */

  /* ---- type ----
     One family in two weights. The approved mockup paired a heavy grotesque
     display with Georgia body prose, but the engine has exactly two font
     tokens: --serif drives headings AND ui labels, --sans drives body AND
     buttons, nav and form inputs. Georgia in --sans would put a serif in every
     button and input. Rather than fork main.css for one site (hard rule #7),
     this keeps one stack and carries the display character through weight,
     tracking and the uppercase rule at the foot of this file. */
  --sans:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* ---- shape & rhythm ----
     Square corners: the mockup's industrial read comes from hard edges. */
  --r:2px;                 /* card radius */
  --r-sm:2px;              /* button / input radius */
  --maxw:1180px;           /* content width */
  --shadow:0 1px 2px rgba(33,30,26,.04),0 10px 22px -16px rgba(33,30,26,.26);

  /* ---- surfaces & text on dark / tinted overlays ----
     rgb triplets, not hex, because CSS cannot build an rgba() from a hex
     custom property. --scrim-rgb is the one that bites: it is a literal in the
     hero gradient, so a palette swap that misses it leaves the old hue tinting
     the photo. */
  --scrim-rgb:27,24,21;      /* hero photo overlay */
  --band-rgb:27,24,21;       /* CTA band overlay */
  --ink-rgb:33,30,26;        /* shadow tint — keep in step with --ink */
  --zest-rgb:192,138,46;     /* pulse ring — keep in step with --zest */

  --paper:#FBF9F5;           /* mobile panel + sticky bar surface */
  --paper-rgb:251,249,245;   /* same colour, for the translucent stuck header */

  --zest-ink:#2A1D06;        /* text on a --zest surface */
  --zest-dk:#A9761F;         /* --zest hover */

  --on-brand:#DFD9D0;        /* body text on --brand / scrim */
  --on-brand-dim:#CAC4BB;    /* secondary text on --brand */
  --on-brand-mute:#BEB8AF;   /* stat labels on --brand */
  --on-brand-fade:#A9A29A;   /* breadcrumbs on --brand */

  /* ---- hero focal point ----
     Which part of the hero photo survives the cover-crop, as object-position
     "X Y". Photo-specific, so it belongs here rather than in the engine.
     The wall runs up the RIGHT of the frame and the left third is open
     foliage, which is where the headline sits — so X stays high to keep the
     wall in shot. Y: lower = more canopy, higher = more of the gravel course. */
  --hero-focus:68% 46%;
  --hero-focus-sm:74% 52%;   /* narrow screens crop horizontally */

  --hero-band-h:min(76vh,640px);
}

/* ============================================================
   SITE STYLE OVERRIDES — not tokens.
   tokens.css loads BEFORE main.css, so these carry one extra
   level of specificity to win. Kept here, in the site folder,
   rather than forking the shared engine stylesheet (hard rule #7).
   Two rules only, and both are load-bearing for the approved
   design: the oversized uppercase display treatment.
   ============================================================ */
html h1,html h2{text-transform:uppercase;font-weight:800;letter-spacing:-.035em}
html .eyebrow{letter-spacing:.16em}