/* ============================================================
   Superhairpieces — Typography
   Type scale: 1.200 (Minor Third). All text is Poppins.
   (Corrected for the checkout handoff; older files listed Lato.)
   ============================================================ */

:root {
  /* Families */
  --font-ui:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Menlo', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Sizes (px) — Minor Third scale */
  --text-display: 48px;
  --text-h1:      40px;
  --text-h2:      32px;
  --text-h3:      24px;
  --text-h4:      20px;
  --text-body:    16px;
  --text-small:   14px;
  --text-tiny:    12px;

  /* Line heights (px) */
  --lh-display: 56px;
  --lh-h1:      48px;
  --lh-h2:      40px;
  --lh-h3:      32px;
  --lh-h4:      28px;
  --lh-body:    24px;
  --lh-small:   20px;
  --lh-tiny:    16px;

  /* Tracking */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.08em;
}

/* Reusable type classes -------------------------------------- */
.shp-display {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-display); line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight); color: var(--text-strong);
}
.shp-h1 {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-h1); line-height: var(--lh-h1);
  letter-spacing: var(--tracking-tight); color: var(--text-strong);
}
.shp-h2 {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-h2); line-height: var(--lh-h2); color: var(--text-strong);
}
.shp-h3 {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-h3); line-height: var(--lh-h3); color: var(--text-strong);
}
.shp-h4 {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-h4); line-height: var(--lh-h4); color: var(--text-strong);
}
.shp-body {
  font-family: var(--font-body); font-weight: var(--weight-regular);
  font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-weak);
}
.shp-small {
  font-family: var(--font-body); font-weight: var(--weight-regular);
  font-size: var(--text-small); line-height: var(--lh-small); color: var(--text-weak);
}
/* UI label / button text uses Poppins */
.shp-label {
  font-family: var(--font-ui); font-weight: var(--weight-semibold);
  font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-strong);
}
/* Eyebrow / category label */
.shp-eyebrow {
  font-family: var(--font-ui); font-weight: var(--weight-semibold);
  font-size: var(--text-tiny); line-height: var(--lh-tiny);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-weak);
}
.shp-mono {
  font-family: var(--font-mono); font-size: var(--text-small);
  color: var(--text-strong);
}