/*
 * TYPOGRAPHY
 * ==========
 * Type scale + small helper classes used across templates. Stays out
 * of layout — components handle vertical rhythm themselves.
 */

h1, h2, h3, h4 {
  margin: 0 0 0.5rem 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 1.25;
}

h1 { font-size: 1.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem;  letter-spacing: -0.005em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p {
  margin: 0 0 1rem 0;
}

.smallish,
.small {
  font-size: 0.85rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

.smallish {
  text-align: center;
  padding: 0;
}

.muted     { color: var(--color-text-muted); }
.numeric   { font-variant-numeric: tabular-nums; }
.mono      { font-family: var(--font-mono); }

.tabletext {
  text-align: left;
  padding: 8px 12px;
  vertical-align: top;
}

.comment {
  text-align: center;
  margin: 1.5rem auto 0;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

/* Status chips — reusable inline labels for ok/warning/error. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  border: 1px solid transparent;

  &.chip--ok      { color: var(--color-ok);      background: var(--color-ok-bg);      border-color: var(--color-ok-border); }
  &.chip--warning { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); }
  &.chip--error   { color: var(--color-error);   background: var(--color-error-bg);   border-color: var(--color-error-border); }
  &.chip--info    { color: var(--color-info);    background: var(--color-info-bg);    border-color: var(--color-info-border); }
}