/* ============================================================
   AgroRise — Typography
   ============================================================ */
body {
  font-size: var(--fs-16);
  color: var(--text-primary);
}

.display-1 { font-size: var(--fs-56); font-weight: var(--fw-extrabold); line-height: 1.06; letter-spacing: -0.02em; }
.display-2 { font-size: var(--fs-40); font-weight: var(--fw-extrabold); line-height: 1.1; letter-spacing: -0.02em; }
.h1 { font-size: var(--fs-32); }
.h2 { font-size: var(--fs-24); }
.h3 { font-size: var(--fs-20); }
.h4 { font-size: var(--fs-18); }

.text-12 { font-size: var(--fs-12); }
.text-14 { font-size: var(--fs-14); }
.text-16 { font-size: var(--fs-16); }
.text-18 { font-size: var(--fs-18); }
.text-20 { font-size: var(--fs-20); }
.text-24 { font-size: var(--fs-24); }
.text-32 { font-size: var(--fs-32); }
.text-40 { font-size: var(--fs-40); }
.text-56 { font-size: var(--fs-56); }

.text-secondary { color: var(--text-secondary); }
.text-disabled { color: var(--text-disabled); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-primary-brand { color: var(--primary); }
.text-accent { color: var(--brand-accent); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.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-normal { line-height: var(--lh-normal); }
.lh-loose { line-height: var(--lh-loose); }

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

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
}

.lead { font-size: var(--fs-18); color: var(--text-secondary); line-height: var(--lh-loose); }