/* ============================================================
   Beaupixel — Typography tokens & utility classes
   Primary: Basis Grotesque (bold, tight, oversized display)
   Secondary: Neue Haas Grotesk Display (calm body copy)
   Mono: Inconsolata / Basis Grotesque Mono (overlines, code)

   Full scale from the UI-Kit Typography page:
   Headings H1–H9 (Basis Grotesque Bold, 80% line-height, -0.04em).
   Paragraphs P1–P6 (Neue Haas Grotesk Display, 110–130% line-height).
   ============================================================ */

:root {
  --bp-font-display: 'Basis Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --bp-font-body: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  --bp-font-mono: 'Inconsolata', 'Basis Grotesque Mono', ui-monospace, monospace;

  /* Heading scale — H1…H9 (px reference; fluid on the live site) */
  --bp-text-h1: 160px;
  --bp-text-h2: 128px;
  --bp-text-h3: 96px;
  --bp-text-h4: 72px;
  --bp-text-h5: 60px;
  --bp-text-h6: 48px;
  --bp-text-h7: 36px;
  --bp-text-h8: 24px;
  --bp-text-h9: 20px;

  /* Display aliases (map onto the heading scale) */
  --bp-text-display-lg: var(--bp-text-h1);  /* 160 */
  --bp-text-display-md: var(--bp-text-h2);  /* 128 */
  --bp-text-display-sm: var(--bp-text-h5);  /* 60 */
  --bp-text-headline: var(--bp-text-h7);    /* 36 */
  --bp-text-title: var(--bp-text-h9);       /* 20 */

  /* Paragraph scale — P1…P6 */
  --bp-text-p1: 36px;
  --bp-text-p2: 24px;
  --bp-text-p3: 20px;
  --bp-text-p4: 18px;
  --bp-text-p5: 16px;
  --bp-text-p6: 14px;

  --bp-tracking-tight: -0.04em;
  --bp-tracking-normal: 0;
  --bp-tracking-wide: 0.01em;

  --bp-leading-display: 0.8;   /* 80% — signature tight display */
  --bp-leading-snug: 1.0;
  --bp-leading-body: 1.3;      /* 130% body */
}

/* ---------------- Headings (H1–H9) ---------------- */
.bp-h1, .bp-h2, .bp-h3, .bp-h4, .bp-h5, .bp-h6, .bp-h7, .bp-h8, .bp-h9,
.bp-display-lg, .bp-display-md, .bp-display-sm, .bp-headline {
  font-family: var(--bp-font-display);
  font-weight: 700;
  letter-spacing: var(--bp-tracking-tight);
  line-height: var(--bp-leading-display);
  margin: 0;
  text-wrap: balance;
}
.bp-h1 { font-size: var(--bp-text-h1); }
.bp-h2 { font-size: var(--bp-text-h2); }
.bp-h3 { font-size: var(--bp-text-h3); }
.bp-h4 { font-size: var(--bp-text-h4); }
.bp-h5 { font-size: var(--bp-text-h5); }
.bp-h6 { font-size: var(--bp-text-h6); }
.bp-h7 { font-size: var(--bp-text-h7); }
.bp-h8 { font-size: var(--bp-text-h8); }
.bp-h9 { font-size: var(--bp-text-h9); }

/* Display aliases */
.bp-display-lg { font-size: var(--bp-text-display-lg); line-height: 1; }
.bp-display-md { font-size: var(--bp-text-display-md); line-height: 1; }
.bp-display-sm { font-size: var(--bp-text-display-sm); line-height: 1; }
.bp-headline { font-size: var(--bp-text-headline); line-height: 1; }
.bp-title { font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-title); line-height: 1; letter-spacing: var(--bp-tracking-tight); margin: 0; }

/* ---------------- Paragraphs (P1–P6) ---------------- */
.bp-p1, .bp-p2, .bp-p3, .bp-p4, .bp-p5, .bp-p6 {
  font-family: var(--bp-font-body);
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}
.bp-p1 { font-size: var(--bp-text-p1); line-height: 1.1; }
.bp-p2 { font-size: var(--bp-text-p2); line-height: var(--bp-leading-body); }
.bp-p3 { font-size: var(--bp-text-p3); line-height: var(--bp-leading-body); }
.bp-p4 { font-size: var(--bp-text-p4); line-height: var(--bp-leading-body); }
.bp-p5 { font-size: var(--bp-text-p5); line-height: var(--bp-leading-body); }
.bp-p6 { font-size: var(--bp-text-p6); line-height: var(--bp-leading-body); }

/* ---------------- Labels / Overline ---------------- */
.bp-label { font-family: var(--bp-font-body); font-weight: 400; font-size: var(--bp-text-p2); line-height: 1.3; }
.bp-label-sm { font-family: var(--bp-font-body); font-weight: 400; font-size: var(--bp-text-p5); line-height: 1.8; }
.bp-overline {
  font-family: var(--bp-font-mono);
  font-weight: 400;
  font-size: var(--bp-text-p6);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.bp-mono { font-family: var(--bp-font-mono); font-weight: 400; }