/* ============================================================
   BRC - BRAND LAYER
   ------------------------------------------------------------
   This is the ONE file you edit to re-brand the entire site.
   Change the colors, fonts, and logo settings here and every
   page updates automatically.
   ============================================================ */

:root {
  /* ---- Identity ---------------------------------------- */
  /* Shown in the header/footer wordmark (also editable in js/data.js -> site) */

  /* ---- Core palette ------------------------------------ */
  --brand-ink:        #14141a;   /* primary text / near-black */
  --brand-ink-soft:   #4a4a52;   /* secondary text            */
  --brand-paper:      #ffffff;   /* page background           */
  --brand-paper-alt:  #f6f4f0;   /* alternating band bg       */
  --brand-line:       #e4e0d8;   /* hairline rules            */

  /* ---- Accent (the "BRC layer") ------------------------ */
  --brand-accent:     #9a7b4f;   /* bronze - buttons, links, tags   */
  --brand-accent-dark:#7c6138;   /* hover state                     */
  --brand-accent-soft:#f1e9dc;   /* pale accent wash / sold badges  */

  /* ---- Status colors ----------------------------------- */
  --status-active:    #1f6f43;
  --status-sold:      #8c2f2f;
  --status-pending:   #a4780a;

  /* ---- Typography -------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* ---- Shape & rhythm ---------------------------------- */
  --radius:       2px;           /* keep small for a tailored look */
  --shadow:       0 18px 45px -18px rgba(20, 20, 26, .22);
  --header-h:     148px;
  --max-w:        1280px;
}

/* ---- Logo slot -----------------------------------------------------
   The header shows assets/logo.svg. To use your own logo:
   1. Drop your file into /assets (e.g. assets/brc-logo.png)
   2. Update the <img src> in js/main.js (search for "logo")
   3. Adjust the height below if needed.
--------------------------------------------------------------------- */
.logo img { height: 66px; width: auto; display: block; }
.footer-logo img { height: 52px; width: auto; }