/* ============================================================================
 * core/typography.css — semantic type classes
 * ============================================================================
 * Depends on: tokens.css
 * Authoritative source: ForceX_Typography_and_CSS_Catalog_Spec.md §"Typography Roles"
 *
 * Hard rules:
 *   - Sans (Schibsted Grotesk) for headlines, body, navigation, buttons, labels
 *   - Mono (Roboto Mono) ONLY for machine identifiers, never for hero/body/nav
 *   - Type scale is 12/14/16/18/20/24/32/40/48/64 only
 * ========================================================================== */

/* Display / hero — homepage hero only */
.text-display {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
}

/* H1 — page titles */
.text-h1 {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text);
}

/* H2 — major section headings */
.text-h2 {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* H3 — cards, modules, dashboard sections */
.text-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--text);
}

/* H4 — smaller grouped sections */
.text-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.30;
  color: var(--text);
}

/* Body large — homepage narrative, product descriptions */
.text-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--muted2);
}

/* Body standard — default interface text */
.text-body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--muted2);
}

/* Body small — metadata, helper text */
.text-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--muted);
}

/* Label — field labels and component labels */
.text-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted);
}

/* Eyebrow — small label above headings */
.text-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
}

/* Helper — inline guidance under inputs */
.text-helper {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--muted);
}

/* Mono — for machine identifiers ONLY (never use as default body/headline) */
.text-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Metric tokens — for prominent numeric displays (Roboto Mono) */
.text-metric-lg {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: 1.20;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.text-metric-md {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.text-metric-sm {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}