/* =====================================================================
   JUSTIN RUUTH — HOMES FOR SALE ST GEORGE UTAH  (metro core)
   Mirrors siteConf/client-config.json -> brand.palette.

   Brief (Realtor PDF 9): "professional, approachable, local, practical - NOT
   luxury-agent generic and NOT moving-company industrial. The site should
   visually communicate calm coordination during a stressful transition."

   So: no Just-In Time cyan (that reads as the moving company), and no black-
   and-gold luxury-agent cliche. A deep navy-teal with warm brass — settled,
   competent, human.

   This must also look clearly DIFFERENT from stgeorgeutahhomesforsale.com,
   which runs sage/terracotta. Two near-synonym domains that look identical
   invite exactly the duplicate-content association the territory split exists
   to prevent.

   CONTRAST vs #FFFFFF:
     --navy     #1D4E6F  7.4:1  AA/AAA at body size
     --brass    #C8862A  2.9:1  fills / icons / 24px+ ONLY
     --brass-text #8A5C17 5.3:1 AA
     --ink-2    #31465A  9.6:1
     --ink-3    #5C7185  4.9:1
   ===================================================================== */

:root {
  /* Brand accents */
  --green: #1D4E6F;            /* navy-teal in site.css's primary slot */
  --red:   #B04A3A;
  --teal:  #2C7D94;
  --amber: #C8862A;            /* brass */

  --green-700: #16405C;
  --green-050: rgba(29,78,111,.09);
  --red-050:   rgba(176,74,58,.10);
  --teal-050:  rgba(44,125,148,.10);
  --amber-050: rgba(200,134,42,.14);

  --green-text: #16405C;
  --teal-text:  #1F5D6E;
  --red-text:   #8E3729;

  /* Neutrals — cool, quiet, slightly blue */
  --ink:   #12202B;
  --ink-2: #31465A;
  --ink-3: #5C7185;
  --line:  #DDE5EA;
  --surface:   #FFFFFF;
  --surface-2: #F5F8FA;
  --surface-3: #E7EEF3;
  --dark:      #12202B;
  --dark-2:    #1C2E3D;
  --on-dark:   #F5F8FA;
  --on-dark-2: #A3B6C4;

  --ribbon: linear-gradient(90deg, #1D4E6F 0%, #2C7D94 55%, #C8862A 100%);

  --radius:    14px;
  --radius-lg: 22px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(18,32,43,.06), 0 2px 8px rgba(18,32,43,.05);
  --shadow-md: 0 4px 12px rgba(18,32,43,.07), 0 12px 32px rgba(18,32,43,.08);

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  /* Was clamp(56px, 9vw, 96px). Section padding is applied top AND bottom,
     so 96px meant 192px of empty white between every pair of sections on a
     desktop screen, and the homepage has nine of them. 76px still separates
     the bands clearly now that they alternate light/dark and carry
     photography, which does the separating that whitespace was doing alone. */
  --section-y: clamp(48px, 6.2vw, 76px);

  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 48px; --s6: 64px;  --s7: 96px;
}