/* RealEstateContent.ai — Typography
   Display / headings / UI labels: Poppins (geometric, friendly, confident).
   Body / long-form / paragraphs: Roboto (neutral, highly legible).
   Note: the Figma type spec frame nominally lists Roboto for both, but the
   shipped marketing pages set headers in Poppins — that dominant pattern is
   codified here. */

:root {
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* @kind font */
  --font-body:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* @kind font */

  /* Weights */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Type scale (desktop) ----
     Headings use 120–130% line-height; body uses 150%. */
  --text-h1: 56px; /* @kind font */
  --lh-h1: 1.2;    /* @kind font */
  --text-h2: 48px; /* @kind font */
  --lh-h2: 1.2;    /* @kind font */
  --text-h3: 40px; /* @kind font */
  --lh-h3: 1.2;    /* @kind font */
  --text-h4: 32px; /* @kind font */
  --lh-h4: 1.3;    /* @kind font */
  --text-h5: 24px; /* @kind font */
  --lh-h5: 1.4;    /* @kind font */
  --text-h6: 20px; /* @kind font */
  --lh-h6: 1.4;    /* @kind font */

  --text-lg: 18px;   /* @kind font */
  --lh-lg: 1.5;      /* @kind font */
  --text-base: 16px; /* @kind font */
  --lh-base: 1.5;    /* @kind font */
  --text-sm: 14px;   /* @kind font */
  --lh-sm: 1.5;      /* @kind font */
  --text-xs: 12px;   /* @kind font */
  --lh-xs: 1.5;      /* @kind font */

  /* Mobile heading overrides (apply at <= 768px in product code) */
  --text-h1-mobile: 40px; /* @kind font */
  --text-h2-mobile: 36px; /* @kind font */
  --text-h3-mobile: 32px; /* @kind font */
  --text-h4-mobile: 24px; /* @kind font */
  --text-h5-mobile: 20px; /* @kind font */
  --text-h6-mobile: 18px; /* @kind font */

  --tracking-tight: -0.02em; /* @kind font */
}

/* Optional ready-made heading/body helpers (components mostly set type inline). */
.rec-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.rec-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.rec-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h3); line-height: var(--lh-h3); color: var(--text-primary); }
.rec-h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h4); line-height: var(--lh-h4); color: var(--text-primary); }
.rec-h5 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h5); line-height: var(--lh-h5); color: var(--text-primary); }
.rec-h6 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h6); line-height: var(--lh-h6); color: var(--text-primary); }
.rec-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--lh-base); color: var(--text-primary); }
.rec-lead { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--text-lg); line-height: var(--lh-lg); color: var(--text-primary); }
.rec-tagline { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-base); line-height: var(--lh-base); }