/* ==========================================================================
   Blissporium Design System — Typography
   Headings/CTAs: Quicksand · Body: Quando
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* Large display headings (h1, hero/editorial titles) get a calmer,
   quieter treatment than compact section/product headings: a lighter
   weight and open, not-tight tracking. Premium headlines read as
   confident because they aren't crowded — the size alone carries the
   hierarchy, the weight doesn't need to shout too. */
h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
}

h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); }
h5, .h5 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h6, .h6 { font-size: var(--text-md); line-height: var(--leading-snug); }

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

/* --------------------------------------------------------------------
   Display & editorial styles
   -------------------------------------------------------------------- */
.display {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* 2026-08-09 — was --color-brown, a warm-taupe token outside the
   established white/coral/peach/ink system; --color-text-secondary is
   already the sitewide "muted ink" tier used everywhere else for this
   same quiet-label job. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------
   Text utilities
   -------------------------------------------------------------------- */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

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

.text-primary   { color: var(--color-text); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent-dark); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-inverse   { color: var(--color-text-inverse); }

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

.uppercase  { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.capitalize { text-transform: capitalize; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* Inline text link */
.link {
  color: var(--color-accent-dark);
  font-weight: var(--weight-medium);
  transition: var(--transition-color);
  text-underline-offset: 3px;
}

.link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* Price styling (product-wide convention) */
.price {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.price--old {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.price--sale {
  color: var(--color-danger);
}