/* ============================================================
   Livoo — Typography tokens
   Display/UI: Poppins (geometric, matches the wordmark)
   Body:       Mulish  (humanist, long-form copy)
   ============================================================ */

:root {
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Mulish', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

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

  /* ---- Type scale (px) ---- */
  --fs-display:  44px;  /* hero banners */
  --fs-h1:       32px;
  --fs-h2:       26px;
  --fs-h3:       21px;
  --fs-h4:       18px;
  --fs-lg:       17px;
  --fs-body:     15px;  /* default body */
  --fs-sm:       13.5px;
  --fs-xs:       12px;
  --fs-2xs:      11px;  /* badges, labels */

  /* ---- Price display (bold sans, no decimals emphasis) ---- */
  --fs-price:    22px;
  --fs-price-lg: 28px;

  /* ---- Line heights ---- */ /* @kind other */
  --lh-tight:   1.12;
  --lh-snug:    1.28;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---- Letter spacing ---- */ /* @kind other */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.08em;  /* eyebrow / category labels */
}

/* Convenience role classes (optional, used by specimen cards) */
.livoo-display { font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--text-heading); }
.livoo-h1 { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--text-heading); }
.livoo-h2 { font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--text-heading); }
.livoo-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-heading); }
.livoo-body { font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.livoo-eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-muted); }
.livoo-price { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-price); color: var(--price); letter-spacing: var(--ls-tight); }