/* ==========================================================================
   Typography — Edge Pharma
   Base element type styles + text utility classes, mapped to the scale:
   Display, H1–H4, Body Large, Body, Body Small, Caption. Sizes are fluid
   (see base/variables.css clamp() values), so no breakpoint overrides are
   needed here — responsive.css only handles layout-level adjustments.
   ========================================================================== */

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-body-lg); }
h6 { font-size: var(--fs-body); }

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

small {
  font-size: var(--fs-body-sm);
}

a {
  transition: color var(--duration-fast) var(--ease-default);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

blockquote {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  font-style: italic;
  color: var(--color-text-secondary);
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------------------------------------------------------------------
   Type scale utility classes
   --------------------------------------------------------------------- */

.text-display  { font-size: var(--fs-display); line-height: var(--lh-tight); }
.text-h1       { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.text-h2       { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.text-h3       { font-size: var(--fs-h3); line-height: var(--lh-tight); }
.text-h4       { font-size: var(--fs-h4); line-height: var(--lh-tight); }
.text-body-lg  { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.text-body     { font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.text-body-sm  { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.text-caption  { font-size: var(--fs-caption); line-height: var(--lh-normal); }

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

.lh-tight   { line-height: var(--lh-tight); }
.lh-snug    { line-height: var(--lh-snug); }
.lh-normal  { line-height: var(--lh-normal); }
.lh-relaxed { line-height: var(--lh-relaxed); }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-white     { color: var(--color-white); }
.text-brand     { color: var(--color-primary); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }

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

.text-balance {
  text-wrap: balance;
}