/* ==========================================================================
   Typography
   Poppins carries display/heading weight — used with restraint, headings
   only. Inter handles everything read at length: body copy, UI labels,
   forms, numbers. Never mix them within the same text node.
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6,
.heading {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

p {
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

small,
.text-sm {
  font-size: var(--fs-sm);
}

.text-xs {
  font-size: var(--fs-xs);
}

.text-lg {
  font-size: var(--fs-md);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-accent {
  color: var(--color-accent);
}

.text-success {
  color: var(--color-success-text);
}

.text-danger {
  color: var(--color-danger);
}

.text-center { text-align: center; }
.text-right  { text-align: right; }

.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }

/* Truncation utilities — used heavily on product names in fixed-width cards */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fluid headline for the hero — scales smoothly instead of jumping at
   breakpoints, clamped between mobile and desktop extremes. */
.text-display {
  font-size: clamp(2rem, 4vw + 1rem, var(--fs-3xl));
  line-height: var(--lh-tight);
}