/* ==========================================================================
   GEM Property Management: brand stylesheet (v1.0)
   Drop into /css and link it from every page. Fonts load from ../fonts/.
   ========================================================================== */

/* ---------- Fonts (self-hosted, licenses in /fonts) ---------- */
@font-face{font-family:"Yellowtail";src:url("../fonts/yellowtail-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Oswald";src:url("../fonts/oswald-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Oswald";src:url("../fonts/oswald-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Color */
  --gem-deep:#0B3B2E;        /* primary dark: headers, footers, hero bands */
  --gem-green:#0F5A45;       /* brand green: buttons, links, headings on light */
  --gem-gold:#D9AD55;        /* gold leaf: logo & accents ON DARK ONLY (5.99:1 on deep) */
  --gem-gold-text:#8A6420;   /* gold for small text on light backgrounds (5.0:1) */
  --gem-gold-shadow:#7A5A20; /* drop shade under gold script */
  --gem-cream:#F4EAD8;       /* warm panels, text on dark */
  --gem-paper:#FBF7EF;       /* page background */
  --gem-ink:#171B19;         /* body text (16:1 on paper) */
  --gem-muted:#5A605B;       /* secondary text (6:1 on paper) */
  --gem-line:#DCD2C0;        /* hairlines, borders */
  --gem-brick:#9C3F27;       /* sparing accent: alerts, "new listing" tags */

  /* Type */
  --gem-font-script:"Yellowtail","Brush Script MT",cursive;   /* logo + rare display words only */
  --gem-font-caps:"Oswald","Arial Narrow",sans-serif;          /* headings, labels, buttons (uppercase) */
  --gem-font-body:"Source Serif 4",Georgia,serif;              /* paragraphs, forms */

  --gem-text-xs:.8125rem; --gem-text-sm:.9375rem; --gem-text-md:1.0625rem;
  --gem-text-lg:1.25rem;  --gem-text-xl:1.75rem;  --gem-text-2xl:2.5rem; --gem-text-3xl:clamp(2.5rem,6vw,4.5rem);
  --gem-tracking-caps:.14em; --gem-tracking-label:.28em;

  /* Space & shape */
  --gem-space-1:.25rem; --gem-space-2:.5rem; --gem-space-3:.75rem; --gem-space-4:1rem;
  --gem-space-6:1.5rem; --gem-space-8:2rem; --gem-space-12:3rem; --gem-space-16:4rem;
  --gem-radius:4px; --gem-radius-lg:10px;
  --gem-max:1180px; --gem-measure:65ch;
  --gem-shadow:0 8px 24px rgba(11,59,46,.12);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--gem-paper);color:var(--gem-ink);font:400 var(--gem-text-md)/1.6 var(--gem-font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--gem-font-caps);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin:0 0 var(--gem-space-4);color:var(--gem-deep);text-wrap:balance}
h1{font-size:var(--gem-text-3xl)} h2{font-size:var(--gem-text-2xl)} h3{font-size:var(--gem-text-xl)} h4{font-size:var(--gem-text-lg);letter-spacing:var(--gem-tracking-caps)}
p{margin:0 0 var(--gem-space-4);max-width:var(--gem-measure)}
a{color:var(--gem-green);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gem-deep)}
:focus-visible{outline:3px solid var(--gem-gold);outline-offset:2px}
.gem-container{max-width:var(--gem-max);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* ---------- Brand elements ---------- */
.gem-eyebrow{font:700 var(--gem-text-xs)/1 var(--gem-font-caps);letter-spacing:var(--gem-tracking-label);text-transform:uppercase;color:var(--gem-gold-text)}
.gem-on-dark .gem-eyebrow{color:var(--gem-gold)}
.gem-script{font-family:var(--gem-font-script);font-weight:400;text-transform:none;letter-spacing:0;line-height:.95}
/* Gold swash divider ending in the brand diamond */
.gem-swash{position:relative;height:4px;width:min(260px,70%);background:var(--gem-gold);border-radius:2px;margin:var(--gem-space-6) 0;border:0}
.gem-swash::after{content:"";position:absolute;right:-7px;top:50%;width:10px;height:10px;background:inherit;transform:translateY(-50%) rotate(45deg)}
.gem-swash--center{margin-inline:auto}
/* Dark section (hero, footer) */
.gem-on-dark{background:var(--gem-deep);color:var(--gem-cream)}
.gem-on-dark h1,.gem-on-dark h2,.gem-on-dark h3{color:var(--gem-cream)}
.gem-on-dark a{color:var(--gem-gold)}

/* ---------- Components ---------- */
.gem-btn{display:inline-flex;align-items:center;gap:.5em;font:700 var(--gem-text-sm)/1 var(--gem-font-caps);letter-spacing:var(--gem-tracking-caps);text-transform:uppercase;text-decoration:none;padding:.95em 1.5em;border-radius:var(--gem-radius);border:2px solid var(--gem-green);background:var(--gem-green);color:var(--gem-cream);cursor:pointer;transition:background .15s,color .15s}
.gem-btn:hover{background:var(--gem-deep);border-color:var(--gem-deep);color:var(--gem-cream)}
.gem-btn--outline{background:transparent;color:var(--gem-green)}
.gem-btn--outline:hover{background:var(--gem-green);color:var(--gem-cream)}
.gem-on-dark .gem-btn{background:var(--gem-gold);border-color:var(--gem-gold);color:var(--gem-deep)}
.gem-on-dark .gem-btn:hover{background:var(--gem-cream);border-color:var(--gem-cream)}
.gem-card{background:#fff;border:1px solid var(--gem-line);border-radius:var(--gem-radius-lg);padding:var(--gem-space-6)}
.gem-card--listing{padding:0;overflow:hidden}
.gem-card--listing img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.gem-card--listing .gem-card__body{padding:var(--gem-space-4) var(--gem-space-6) var(--gem-space-6)}
.gem-price{font:700 var(--gem-text-xl)/1 var(--gem-font-caps);color:var(--gem-deep)}
.gem-tag{display:inline-block;font:700 var(--gem-text-xs)/1 var(--gem-font-caps);letter-spacing:var(--gem-tracking-caps);text-transform:uppercase;padding:.45em .7em;border-radius:2px;background:var(--gem-cream);color:var(--gem-deep)}
.gem-tag--new{background:var(--gem-brick);color:#fff}
.gem-field{display:grid;gap:var(--gem-space-2);margin-bottom:var(--gem-space-4)}
.gem-field label{font:700 var(--gem-text-xs)/1 var(--gem-font-caps);letter-spacing:var(--gem-tracking-caps);text-transform:uppercase;color:var(--gem-deep)}
.gem-field input,.gem-field select,.gem-field textarea{font:inherit;padding:.75em .9em;border:1px solid #9FA59F;border-radius:var(--gem-radius);background:#fff;color:var(--gem-ink)}
.gem-field input:focus,.gem-field select:focus,.gem-field textarea:focus{border-color:var(--gem-green);outline:3px solid rgba(15,90,69,.25);outline-offset:0}
.gem-footer{background:var(--gem-deep);color:var(--gem-cream);padding-block:var(--gem-space-12)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}