/* Reusable typography variants. Consuming components own only placement and
   contextual colour; pages do not invent font sizes for ordinary copy. */
.type-page-title {
  color: var(--color-action);
  font-family: var(--font-display);
  font-size: var(--font-size-page-title);
  font-weight: 700;
  line-height: var(--line-height-tight);
}

.type-section-heading {
  color: var(--color-action);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}

.type-eyebrow {
  color: var(--color-text-accent);
  font-size: var(--font-size-compact);
  font-weight: 700;
  line-height: var(--line-height-compact);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.type-supporting {
  font-family: var(--font-ui);
  font-size: var(--font-size-supporting);
  font-weight: 400;
  line-height: var(--line-height-supporting);
}

.type-body {
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-height-body);
}

.type-caption {
  font-family: var(--font-ui);
  font-size: var(--font-size-compact);
  font-weight: 400;
  line-height: var(--line-height-compact);
}

.type-metric {
  color: var(--color-action);
  font-family: var(--font-display);
  font-size: var(--font-size-metric-lg);
  font-weight: 700;
  line-height: 1;
}

.type-metric-md { font-size: var(--font-size-metric-md); }
.type-metric-sm { font-size: var(--font-size-metric-sm); }
.type-metric-xs { font-size: var(--font-size-metric-xs); }

/* An ordinary value that matters but is not a headline result. This keeps
   recorded and derived data legible without giving every figure the display
   face and prominence reserved for projection outcomes. */
.type-data {
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: var(--line-height-compact);
}

/* A user-owned name or durable domain entity, such as a named scenario. It is
   deliberately display-led like a heading, but its semantic role is distinct
   from fixed interface structure. */
.type-entity {
  color: var(--color-action);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}

.section-title {
  letter-spacing: 1.2px;
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-light);
}

/* Shared accessible hiding utility: content remains in the accessibility tree
   and keyboard semantics remain on the associated control. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}