/* RealEstateContent.ai — Typography
   Display / headings / UI labels: Poppins. Body / long-form: Roboto.

   THE SCALE IS FLUID. Every size is a clamp() against container-query inline
   units (cqi), because page roots set `container-type: inline-size`. That means
   a design responds to ITS CONTAINER, so it reads identically full-width, inside
   a 430px phone frame, and embedded in a preview pane. Use the fluid tokens by
   default; the fixed steps below them are for fixed-width artboards only. */

: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 — 800 is the display weight. It is what gives headlines their punch. */
  --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 */  /* hero, section h2, post overlay headlines */

  /* ---- FLUID SCALE (canonical) ---- */
  --fs-display: clamp(44px, 6.7cqi, 80px); /* @kind font */  /* hero h1 */
  --fs-h2:      clamp(32px, 5cqi, 56px);   /* @kind font */  /* section headline */
  --fs-h2-sm:   clamp(28px, 4.2cqi, 44px); /* @kind font */  /* secondary section */
  --fs-h3:      clamp(24px, 2.8cqi, 32px); /* @kind font */  /* card headline */
  --fs-h4:      22px;                       /* @kind font */  /* step-card title */
  --fs-lead:    clamp(16px, 1.8cqi, 19px);  /* @kind font */  /* section subhead */
  --fs-body:    clamp(15.5px, 1.6cqi, 17.5px); /* @kind font */
  --fs-body-sm: 15.5px; /* @kind font */
  --fs-caption: 14px;   /* @kind font */
  --fs-eyebrow: clamp(12.5px, 1.1cqi, 14px); /* @kind font */

  /* ---- Tracking pairs with SIZE, not with component ---- */
  --tracking-display: -0.02em; /* @kind font */  /* h2 and above */
  --tracking-heading: -0.01em; /* @kind font */  /* h3 / h4 */
  --tracking-body: 0;          /* @kind font */
  --tracking-eyebrow: 0.14em;  /* @kind font */  /* range .12–.16em */
  --tracking-tight: var(--tracking-display); /* @kind font */ /* legacy alias */

  /* ---- Line-height pairs with ROLE ---- */
  --lh-display: 1.04; /* @kind font */  /* range 1.02–1.08 */
  --lh-heading: 1.16; /* @kind font */  /* range 1.12–1.2 */
  --lh-body: 1.55;    /* @kind font */  /* range 1.5–1.6 */

  /* ---- Fixed steps (fixed-width artboards, slides, email) ---- */
  --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 */
}

/* ---- Defaults, not opt-ins ---- */
h1, h2, h3, h4, h5, h6, .rec-h1, .rec-h2, .rec-h3, .rec-h4, .rec-h5, .rec-h6 { text-wrap: balance; }
p, .rec-body, .rec-lead { text-wrap: pretty; }

.rec-display { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.rec-h1 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.rec-h2 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.rec-h2-sm { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2-sm); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.rec-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--text-primary); }
.rec-h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); 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-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-muted); }
.rec-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3); }
.rec-body-sm { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ink-4); }
.rec-caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--ink-faint); }

/* Eyebrow — sits above nearly every section headline */
.rec-eyebrow { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--primary-500); }

.rec-tagline { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-base); line-height: var(--lh-base); }