/* ============================================================
   typography.css — Font, heading, body text, code, utility
   ============================================================ */

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }

/* ── Body ── */
p {
  margin-bottom: var(--space-3);
  line-height: var(--lh-base);
  color: var(--text-primary);
}

p:last-child {
  margin-bottom: 0;
}

small {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

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

/* ── Label di sezione (sopra campi, card) ── */
.label-section {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-1);
}

/* ── Valore campo ── */
.field-value {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

/* ── Testo muted / secondario ── */
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-accent    { color: var(--color-accent) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-danger    { color: var(--color-danger) !important; }

/* ── Dimensioni testo ── */
.fs-xs   { font-size: var(--fs-xs); }
.fs-sm   { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.fs-md   { font-size: var(--fs-md); }
.fs-lg   { font-size: var(--fs-lg); }
.fs-xl   { font-size: var(--fs-xl); }

/* ── Pesi ── */
.fw-light    { font-weight: var(--fw-light); }
.fw-normal   { font-weight: var(--fw-normal); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }

/* ── Code / mono ── */
code, kbd, pre, samp {
  font-family: var(--font-mono);
}

code {
  font-size: var(--fs-sm);
  background: var(--bg-surface-2);
  border: 0.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--text-primary);
}

pre {
  background: var(--bg-surface-2);
  border: 0.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--fs-sm);
  overflow-x: auto;
  line-height: var(--lh-loose);
  color: var(--text-primary);
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ── Liste ── */
ul, ol {
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}

li {
  margin-bottom: var(--space-1);
  line-height: var(--lh-base);
}

/* ── Link ── */
.link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color var(--transition-base);
}

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

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

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

/* ── Italic / note ── */
.note-italic {
  font-style: italic;
  color: var(--text-secondary);
  font-size: var(--fs-base);
}

.placeholder-text {
  font-style: italic;
  color: var(--text-muted);
}

/* ── Troncatura ── */
.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-nowrap {
  white-space: nowrap;
}

/* ── Separatori testuali ── */
.text-sep {
  color: var(--border-color);
  margin: 0 var(--space-2);
  user-select: none;
}