/* Typography system v1: light, clear content; emphasis reserved for hierarchy. */
:root {
  --eco-font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --eco-font-body: 400;
  --eco-font-ui: 500;
  --eco-font-label: 600;
  --eco-font-title: 700;
  --eco-font-display: 800;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--eco-font-family) !important;
}

/* Reset legacy per-component weights. Semantic hierarchy below restores emphasis only where it helps scanning. */
#ecoapp :where(div, span, p, small, li, td) {
  font-weight: inherit !important;
}

body,
p,
small,
li,
td,
textarea,
input,
select,
.muted,
.hint,
.helper-text,
.form-help,
.member-period-note,
.section-subtitle,
.page-subtitle,
.card p,
.card small,
.modal-body p {
  font-weight: var(--eco-font-body) !important;
  line-height: 1.55;
}

label,
th,
button,
.btn,
.chip,
.badge,
.status,
.nav-link,
.form-label,
.field-label {
  font-weight: var(--eco-font-label) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.section-title,
.card-title,
.modal-title,
.hero-title,
.topbar-title {
  font-weight: var(--eco-font-title) !important;
  letter-spacing: -0.015em;
}

.hero-title,
h1,
.page-title {
  font-weight: var(--eco-font-display) !important;
}

/* Keep numerical indicators and status names legible without making all copy bold. */
.kpi-value,
.metric-value,
.stat-value,
.amount,
.price,
.ranking-number,
.order-total,
.wallet-balance,
.status strong,
.badge strong {
  font-weight: var(--eco-font-title) !important;
}

/* These declarations follow the reset and intentionally restore the visual hierarchy. */
#ecoapp :is(h1, h2, h3, h4, h5, h6, .page-title, .section-title, .card-title, .modal-title, .hero-title, .topbar-title) {
  font-weight: var(--eco-font-title) !important;
}

#ecoapp :is(.hero-title, h1, .page-title) {
  font-weight: var(--eco-font-display) !important;
}

#ecoapp :is(label, th, button, .btn, .chip, .badge, .status, .nav-link, .form-label, .field-label) {
  font-weight: var(--eco-font-label) !important;
}

#ecoapp :is(.kpi-value, .metric-value, .stat-value, .amount, .price, .ranking-number, .order-total, .wallet-balance, .status strong, .badge strong) {
  font-weight: var(--eco-font-title) !important;
}

@media (max-width: 720px) {
  body,
  p,
  li,
  td,
  input,
  select,
  textarea {
    line-height: 1.5;
  }

  h1,
  .page-title,
  .hero-title {
    letter-spacing: -0.01em;
  }
}