/* ============================================================
   AZ Real Estate — Design Tokens
   Colors + Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --az-green:        #64BC64;  /* Primary / hero / CTA */
  --az-green-80:     #83C983;
  --az-green-60:     #A2D6A2;
  --az-green-40:     #C1E4C1;
  --az-green-20:     #E0F1E0;
  --az-dark-green:   #1F281F;  /* Dark surface / body text */
  --az-white:        #FFFFFF;

  /* ---------- GRAY SCALE (canonical; do not invent new grays) ---------- */
  --az-gray-10:      #E6E6E6;
  --az-gray-50:      #969696;
  --az-gray-80:      #585858;

  /* ---------- SEMANTIC: LIGHT MODE (default) ---------- */
  --bg:              var(--az-white);
  --bg-subtle:       #FAFAFA;
  --bg-muted:        var(--az-gray-10);
  --fg:              var(--az-dark-green);   /* body text */
  --fg-muted:        var(--az-gray-80);      /* secondary copy */
  --fg-subtle:       var(--az-gray-50);      /* metadata, captions */
  --accent:          var(--az-green);        /* hero color */
  --accent-ink:      var(--az-dark-green);   /* accent text on dark green bg */
  --border:          var(--az-gray-10);
  --border-strong:   var(--az-gray-50);
  --link:            var(--az-dark-green);
  --link-hover:      var(--az-green);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:       'Open Sans', Helvetica, Arial, sans-serif;
  --font-display:    'Playfair Display', 'Open Sans', Georgia, serif; /* editorial only */

  /* Scale (in px — 1pt ≈ 1.333px; source document uses pt) */
  --fs-headline:     48px;  /* 36pt Bold */
  --fs-subhead:      32px;  /* 24pt Regular */
  --fs-h3:           22px;
  --fs-body:         16px;  /* 12pt Regular */
  --fs-body-sm:      14px;  /* 10pt SemiBold */
  --fs-caption:      12px;

  --lh-headline:     1.08;
  --lh-subhead:      1.12;
  --lh-body:         1.55;
  --lh-tight:        1.25;

  --fw-light:        300;
  --fw-regular:      400;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-extrabold:    800;

  --tracking-caps:   0.08em;  /* buttons, labels, ALL CAPS heads */
  --tracking-normal: 0;

  /* ---------- SPACING ---------- */
  --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;
  --space-10:  128px;

  /* ---------- RADIUS ---------- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- ELEVATION (restrained; brand is flat + airy) ---------- */
  --shadow-xs:  0 1px 2px rgba(31,40,31,0.06);
  --shadow-sm:  0 2px 6px rgba(31,40,31,0.08);
  --shadow-md:  0 6px 18px rgba(31,40,31,0.10);
  --shadow-lg:  0 16px 40px rgba(31,40,31,0.14);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph:     cubic-bezier(0.3, 0, 0, 1);
  --dur-fast:      140ms;
  --dur-base:      220ms;
  --dur-slow:      380ms;
}

/* ---------- DARK MODE (opt-in via .az-dark) ---------- */
.az-dark {
  --bg:            var(--az-dark-green);
  --bg-subtle:     #293229;
  --bg-muted:      #33403A;
  --fg:            var(--az-white);
  --fg-muted:      #D9DDD9;
  --fg-subtle:     #9AA39A;
  --accent:        var(--az-green);
  --border:        rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.28);
  --link:          var(--az-white);
  --link-hover:    var(--az-green);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.az-h1, h1.az {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.az-h1--caps {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.az-h2, h2.az {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.az-h3, h3.az {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0;
}

.az-body, p.az {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--space-3) 0;
  text-wrap: pretty;
}

.az-body-sm, .az-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  color: var(--fg-muted);
}

.az-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.az-accent-green { color: var(--az-green); }
.az-accent-dark  { color: var(--az-dark-green); }

.az-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
}

/* ============================================================
   UTILITY: left-aligned default (brand rule)
   ============================================================ */
.az-stack  { display: flex; flex-direction: column; gap: var(--space-4); }
.az-row    { display: flex; align-items: center; gap: var(--space-3); }
.az-left   { text-align: left; }