/* =========================================================================
   jcc-type.css — R1 type utilities (DESIGN_SYSTEM.md §1).

   Utility classes only — NO literals (every value references a --jcc-*/--ds-*
   token in jcc-tokens.css, so P-13 holds). Loaded LAST in the layout head so
   these win the cascade. The font families themselves are repointed at the
   token level (jcc-tokens.css --jcc-font-body → Schibsted Grotesk), so the
   app-wide swap already happens through the existing `body` rule; the explicit
   body rule below is belt-and-suspenders + the antialiasing the spec calls for.
   ========================================================================= */

body {
    font-family: var(--jcc-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The signature rule: every number is mono, every label is sans. */
.mono {
    font-family: var(--jcc-font-mono);
    font-feature-settings: 'tnum' 1;   /* tabular figures — columns align */
}

/* ---------- type scale (§1) — role utilities ---------- */

.ds-page-title {
    font-size: var(--ds-page-title-size);
    font-weight: var(--ds-page-title-weight);
    letter-spacing: var(--ds-page-title-track);
    line-height: var(--jcc-leading-tight);
}

.ds-section-title {
    font-size: var(--ds-section-title-size);
    font-weight: var(--ds-section-title-weight);
    letter-spacing: var(--ds-section-title-track);
    line-height: var(--jcc-leading-tight);
}

/* KPI + hero metrics are numbers → mono by default. */
.ds-kpi {
    font-family: var(--jcc-font-mono);
    font-feature-settings: 'tnum' 1;
    font-size: var(--ds-kpi-size);
    font-weight: var(--ds-kpi-weight);
    letter-spacing: var(--ds-kpi-track);
}

.ds-hero-metric {
    font-family: var(--jcc-font-mono);
    font-feature-settings: 'tnum' 1;
    font-size: var(--ds-hero-size);
    font-weight: var(--ds-hero-weight);
    letter-spacing: var(--ds-hero-track);
}

.ds-card-title {
    font-size: var(--ds-card-title-size);
    font-weight: var(--ds-card-title-weight);
}

.ds-body {
    font-size: var(--ds-body-size);
    font-weight: var(--ds-body-weight);
    line-height: var(--jcc-leading-base);
}

.ds-label {
    font-size: var(--ds-label-size);
    font-weight: var(--ds-label-weight);
    color: var(--muted);
}

.ds-eyebrow {
    font-size: var(--ds-eyebrow-size);
    font-weight: var(--ds-eyebrow-weight);
    letter-spacing: var(--ds-eyebrow-track);
    text-transform: uppercase;
    color: var(--faint-2);
}

.ds-table-header {
    font-size: var(--ds-table-header-size);
    font-weight: var(--ds-table-header-weight);
    letter-spacing: var(--ds-table-header-track);
    text-transform: uppercase;
    color: var(--faint);
}

.ds-micro {
    font-size: var(--ds-micro-size);
    font-weight: var(--ds-micro-weight);
}