/* ============================================================
   Buen Corazón — Typography Tokens
   ------------------------------------------------------------
   Display / headings : PLAYFAIR DISPLAY (serif)  — h1–h4
   Body / UI / labels : LATO (sans)
   Mirrors the live site's type system exactly.
   ============================================================ */

:root {
  /* ---- Families -------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Role aliases */
  --font-heading: var(--font-display);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);
  --font-eyebrow: var(--font-sans);

  /* ---- Weights --------------------------------------------- */
  --fw-light:      300;  /* @kind font */
  --fw-regular:    400;  /* @kind font */
  --fw-bold:       700;  /* @kind font */
  --fw-black:      900;  /* @kind font */
  --fw-heading:    700;  /* @kind font */  /* Playfair headings  */
  --fw-heading-sm: 600;  /* @kind font */  /* h3                 */

  /* ---- Type scale (matches site clamps) -------------------- */
  --text-2xs:   11px;
  --text-xs:    12px;    /* section-label / kicker             */
  --text-sm:    13px;    /* eyebrow / small UI                 */
  --text-ui:    14px;    /* buttons / nav                      */
  --text-base:  17px;    /* body (site default)                */
  --text-lead:  20px;    /* lead paragraph                     */
  --h3:         clamp(20px, 2.5vw, 26px);   /* @kind font */
  --h2:         clamp(26px, 3.5vw, 38px);   /* @kind font */
  --h1:         clamp(34px, 5vw, 58px);     /* @kind font */
  --display-xl: clamp(44px, 6vw, 72px);   /* @kind font */  /* hero / social      */

  /* ---- Line heights ---------------------------------------- */
  --leading-tight:   1.15;   /* h1                              */
  --leading-snug:    1.25;   /* h2                              */
  --leading-heading: 1.3;    /* h3                              */
  --leading-normal:  1.5;    /* UI                              */
  --leading-body:    1.8;    /* paragraphs (site uses 1.8)      */
  --leading-lead:    1.7;

  /* ---- Letter spacing -------------------------------------- */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-btn:     1px;    /* buttons                        */
  --tracking-label:   3px;    /* eyebrow / section-label        */
  --tracking-kicker:  2.5px;  /* act kicker                     */
}

/* ============================================================
   Convenience classes (optional — product code may use tokens)
   ============================================================ */

.bc-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

.bc-section-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

.bc-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--h1); line-height: var(--leading-tight); }
.bc-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--h2); line-height: var(--leading-snug); }
.bc-h3 { font-family: var(--font-display); font-weight: var(--fw-heading-sm); font-size: var(--h3); line-height: var(--leading-heading); }

.bc-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
}

.bc-emph { font-style: italic; color: var(--gold-light); }