/* ============================================================
   Design tokens — Betty Nguyen
   Extracted from prod measurements (bettynguyenhomes.com, 2026-05-13).
   Edit here when rebranding; everything else cascades.
   ============================================================ */

:root {
  /* ---- colors ---- */
  --c-primary:        #014085;          /* info bar bg, nav active link, primary CTA */
  --c-primary-hover:  #032d5a;          /* nav link hover (darker navy) */
  --c-text:           #171717;          /* body text */
  --c-text-soft:      #4a4a4a;          /* secondary text, captions */
  --c-text-on-dark:   #ffffff;          /* text on navy bg */
  --c-bg:             #ffffff;
  --c-bg-alt:         #f6f6f6;          /* zebra section bg */
  --c-heading:        #000000;          /* hero / display headings */
  --c-border:         #e5e5e5;
  --c-footer:         #393a3c;          /* footer charcoal band (prod rgb 57,58,60) */
  --c-nav:            #666666;          /* inactive nav link — WCAG AA 5.7:1 (prod's gray was 3.4:1, failed) */
  --c-border-strong:  #8b8b8b;          /* form-input borders — WCAG 1.4.11 non-text 3:1 (was #e5e5e5 ≈1.25:1) */

  /* ---- typography ---- */
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", "Inter", sans-serif;          /* hero/section titles */
  --font-accent:  "Marcellus", Georgia, serif;             /* serif accents, eyebrows */
  --font-alt:     "Assistant", "Inter", sans-serif;        /* secondary copy */

  --text-base:   16px;
  --text-sm:     14px;
  --text-lg:     18px;
  --text-xl:     22px;
  --text-2xl:    32px;
  --text-3xl:    48px;          /* hero h1 (matches prod 48px @ 1440) */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-bold:     700;

  --lh-tight:    1.15;
  --lh-base:     1.5;
  --lh-loose:    1.7;

  --ls-wide:     0.06em;         /* nav links, eyebrows: uppercase + tracking */

  /* ---- spacing scale ---- */
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     24px;
  --space-6:     32px;
  --space-7:     48px;
  --space-8:     64px;
  --space-9:     96px;

  /* ---- layout ---- */
  --container:        1280px;     /* prod body inner: hero is 80px from each side @ 1440 */
  --container-padding: 80px;      /* matches prod hero x=80, w=1280 */
  --info-bar-height:  48px;       /* prod info bar */
  --header-height:    92px;       /* prod nav row */

  /* ---- effects ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,.10);
  --transition:  150ms ease;
}

/* ---- mobile breakpoint adjustments ---- */
@media (max-width: 768px) {
  :root {
    --text-3xl: 32px;             /* hero h1 shrinks on mobile */
    --container-padding: 20px;
    --header-height: 64px;
  }
}