/* ==========================================================================
   TYPOGRAPHY SYSTEM
   Depends on --font-* tokens in global.css. Load global.css first.
   ========================================================================== */

/* Display / page header */
.type-header {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Section headings */
.type-h2 {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.type-h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Body */
.type-body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

.type-body-14 {
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  line-height: 1.6;
}

.type-body-10 {
  font-family: var(--font-body);
  font-size: 0.625rem; /* 10px */
  font-weight: 400;
  line-height: 1.5;
}

/* Links / navigation */
.type-link {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.type-link-12 {
  font-family: var(--font-body);
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  line-height: 1.5;
}

.type-link-12-400 {
  font-family: var(--font-body);
  font-size: 0.75rem; /* 12px */
  font-weight: 400;
  line-height: 1.5;
}

/* Buttons */
.type-button {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

/* Labels / captions */
.type-small-11 {
  font-family: var(--font-body);
  font-size: 0.6875rem; /* 11px */
  font-weight: 400;
  line-height: 1.4;
}

.type-small-10 {
  font-family: var(--font-body);
  font-size: 0.625rem; /* 10px */
  font-weight: 400;
  line-height: 1.4;
}

.type-small-9 {
  font-family: var(--font-body);
  font-size: 0.5625rem; /* 9px */
  font-weight: 400;
  line-height: 1.4;
}

/* Monospace — molecular formulas, CAS numbers, amino sequences */
.type-mono {
  font-family: var(--font-mono);
}

/* ==========================================================================
   TEXT SIZE UTILITIES
   Font-size only — inherits font-family from parent.
   Usage: <p class="text-sm">, <span class="text-lg">, etc.
   ========================================================================== */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
} /* 12px */
.text-sm {
  font-size: 0.875rem;
  line-height: 1.5;
} /* 14px */
.text-md {
  font-size: 1rem;
  line-height: 1.6;
} /* 16px */
.text-lg {
  font-size: 1.125rem;
  line-height: 1.5;
} /* 18px */
.text-xl {
  font-size: 1.25rem;
  line-height: 1.4;
} /* 20px */
.text-2xl {
  font-size: 1.5rem;
  line-height: 1.3;
} /* 24px */