/* ============================================================
   BOLDGROUP — Colors & Type Foundations
   Durham Real Estate · RE/MAX Hallmark
   Source: Bold Group Brand Guidelines v4.1 + Listing Services Book
   ============================================================ */

/* ---- FONTS ---------------------------------------------------
   Display serif  : ITALIANA (free, SIL Open Font License)
   Sans / UI / body: GLACIAL INDIFFERENCE (free, SIL Open Font License)
   Both are hosted with the page in /fonts. Playfair Display / Georgia
   are system fallbacks only.
   ------------------------------------------------------------- */

/* Launch build: fonts are hosted with the page (no third-party font sites).
   Headlines use Italiana; body text uses Glacial Indifference.
   Both are free under the SIL Open Font License and ship in /fonts. */
@font-face { font-family: 'Glacial Indifference'; src: url('fonts/glacial-indifference-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Glacial Indifference'; src: url('fonts/glacial-indifference-400italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Glacial Indifference'; src: url('fonts/glacial-indifference-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Italiana'; src: url('fonts/italiana-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* ---------- BRAND CORE ---------- */
  --bold-green:     #2e3629;  /* Bold Green — primary. Backgrounds, headlines */
  --northern-bark:  #6d4124;  /* Northern Bark — warm earth accent, sparing */
  --pure-white:     #ffffff;  /* Pure White */

  /* ---------- GREEN SCALE (monochromatic, from palette page) ---------- */
  --green-950: #20271c;  /* deepest — overlays, footers */
  --green-900: #2e3629;  /* = Bold Green */
  --green-800: #3b4632;
  --green-700: #4b573e;
  --green-600: #616e52;
  --green-500: #7c886d;  /* sage */
  --green-400: #9ca693;
  --green-300: #bcc3b3;
  --green-200: #d7dccf;
  --green-100: #e9ece3;
  --green-50:  #f4f6f0;  /* off-white sage tint — light section bg */

  /* ---------- GOLD / EDITORIAL ACCENT ----------
     Drawn from the Listing Services Book — the warm gold used for
     emphasis words ("TRUE VALUE", "MORE"), thin icons & dividers. */
  --gold:       #bb8649;  /* sampled from book ≈ #c08850, deepened slightly for text */
  --gold-soft:  #c08850;  /* exact book gold — large display words */
  --gold-bright:#cda369;  /* on dark backgrounds */
  --cream:      #f6f1e7;  /* warm paper / pin cream */

  /* ---------- NEUTRALS / TEXT ---------- */
  --ink:        #2e3629;  /* primary text on light */
  --ink-soft:   #57604f;  /* secondary text on light */
  --ink-muted:  #828a78;  /* tertiary / captions */
  --line:       #e2e5db;  /* hairline borders on light */
  --line-dark:  rgba(255,255,255,.16); /* hairlines on dark */
  --paper:      #ffffff;
  --paper-2:    #f4f6f0;

  /* on-dark text */
  --on-dark:        #f3f4ee;
  --on-dark-soft:   rgba(243,244,238,.74);
  --on-dark-muted:  rgba(243,244,238,.52);

  /* ---------- SEMANTIC ---------- */
  --bg:        var(--pure-white);
  --bg-dark:   var(--bold-green);
  --fg1:       var(--ink);
  --fg2:       var(--ink-soft);
  --fg3:       var(--ink-muted);
  --accent:    var(--gold);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Italiana', 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans:    'Glacial Indifference', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ---------- TYPE SCALE (fluid) ---------- */
  --t-display: clamp(3.2rem, 7vw, 6.5rem); /* @kind font */ /* hero serif */
  --t-h1:      clamp(2.6rem, 5vw, 4.5rem); /* @kind font */
  --t-h2:      clamp(2rem, 3.6vw, 3.25rem); /* @kind font */
  --t-h3:      clamp(1.4rem, 2vw, 1.9rem); /* @kind font */
  --t-h4:      1.25rem;
  --t-lead:    clamp(1.05rem, 1.4vw, 1.3rem); /* @kind font */
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   0.9375rem;   /* 15px */
  --t-eyebrow: 0.78rem;     /* small-caps section label */

  /* ---------- RADII / SHADOW / SPACE ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(32,39,28,.06), 0 1px 3px rgba(32,39,28,.08);
  --shadow-md: 0 8px 24px -8px rgba(32,39,28,.18);
  --shadow-lg: 0 24px 60px -16px rgba(32,39,28,.28);
  --shadow-photo: 0 30px 80px -24px rgba(32,39,28,.45);

  --ease: cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-out: cubic-bezier(.16,1,.3,1); /* @kind other */

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 72px); /* @kind spacing */
}

/* ============================================================
   SEMANTIC TYPOGRAPHY HELPERS
   ============================================================ */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: 0;
}
.h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h1); line-height: 1.04; }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1.06; }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h3); line-height: 1.14; }

/* Caps lockups (the book's "BUILT TO GET YOU MORE" style) */
.display--caps,
.h1--caps { text-transform: uppercase; letter-spacing: 0.005em; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lead   { font-family: var(--font-sans); font-size: var(--t-lead); line-height: 1.55; color: var(--fg2); }
.body   { font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.65; color: var(--fg2); }
.small  { font-family: var(--font-sans); font-size: var(--t-small); line-height: 1.5; }

/* Gold emphasis word inside a serif headline */
.gold { color: var(--gold); }
.on-dark .gold { color: var(--gold-bright); }

/* Stat number — big serif figure */
.stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  letter-spacing: 0;
}