/* ============================================================
   TYPOGRAPHY — Pirone Entertainment
   Display serif (Cormorant Garamond) for classy headlines.
   Sans (Manrope) for energetic, readable body + UI.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    var(--font-sans);

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

  /* Display scale (serif) — big, classy, high-contrast */
  --fs-display-2xl: clamp(3.5rem, 7vw, 6rem);      /* @kind font */
  --fs-display-xl:  clamp(2.75rem, 5vw, 4.25rem);  /* @kind font */
  --fs-display-lg:  clamp(2.25rem, 3.6vw, 3.25rem); /* @kind font */
  --fs-display-md:  clamp(1.75rem, 2.6vw, 2.25rem); /* @kind font */
  --fs-display-sm:  1.5rem; /* @kind font */

  /* Body / UI scale (sans) */
  --fs-xl:   1.375rem;   /* @kind font */
  --fs-lg:   1.125rem; /* @kind font */
  --fs-base: 1rem; /* @kind font */
  --fs-sm:   0.875rem; /* @kind font */
  --fs-xs:   0.75rem; /* @kind font */

  /* Eyebrow / label (sans, uppercase, tracked) */
  --fs-eyebrow: 0.8125rem; /* @kind font */

  /* Line heights */
  --lh-display: 1.02; /* @kind font */
  --lh-tight:   1.15; /* @kind font */
  --lh-snug:    1.3; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-display:  -0.015em; /* @kind font */
  --ls-tight:    -0.01em; /* @kind font */
  --ls-normal:   0; /* @kind font */
  --ls-eyebrow:  0.18em;   /* @kind font */
  --ls-caps:     0.06em; /* @kind font */
}

/* ---- Utility text roles (optional; components can use vars directly) ---- */
.pe-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-secondary);
}
.pe-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}
.pe-display em, .pe-display i {
  font-style: italic;
  color: var(--brand-accent);
}