/* =========================================
   PLATFORMA TYPE SCALE (FASE 5 — DS.2 — 2026-05-08)
   -----------------------------------------
   Closes the FASE 5 finding "h1 og h2 ser ens ud" — admin pages had no
   visible hierarchy between page-title (Kontrolcenter), section-title
   (Systemstatus) and card-title (Feature-flags).

   This file defines 7 utility classes bound to --platforma-text-display-*
   and --platforma-text-headline/title-* tokens (declared in
   platforma-tokens.css v5). Use them in Razor views via:

     <h1 class="platforma-display-2">Kontrolcenter</h1>
     <h2 class="platforma-headline">Systemstatus</h2>
     <h3 class="platforma-title-lg">Feature-flags</h3>
     <h4 class="platforma-title">Card sub-title</h4>
     <span class="platforma-overline">SENEST OPDATERET</span>
     <p class="platforma-body">Body copy</p>
     <p class="platforma-caption">Helper / metadata</p>

   Margins are RESET (margin: 0). Pages compose vertical rhythm via the
   parent container's spacing — this lets the same class work in cards,
   in tables, in hero blocks, etc. without conflict.

   Contracts:
   - All sizes use clamp() (responsive) so mobile and 21" desktop both
     render legibly.
   - Letter-spacing tightens with size (display-1 = -0.03em, body = 0).
   - font-weight ladder: display=700, headline=600, title=600, body=400,
     caption=400, overline=600.
   - Line-height ladder: display=1.08, heading=1.2, body=1.55.
   ========================================= */

.platforma-display-1 {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-display-1);
    font-weight: 700;
    line-height: var(--platforma-leading-display);
    letter-spacing: var(--platforma-tracking-tighter);
    color: var(--platforma-ink-strong);
    margin: 0;
}

.platforma-display-2 {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-display-2);
    font-weight: 700;
    line-height: var(--platforma-leading-display);
    letter-spacing: var(--platforma-tracking-tight);
    color: var(--platforma-ink-strong);
    margin: 0;
}

.platforma-headline {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-headline);
    font-weight: 600;
    line-height: var(--platforma-leading-heading);
    letter-spacing: var(--platforma-tracking-tight);
    color: var(--platforma-ink-strong);
    margin: 0;
}

.platforma-title-lg {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-title-lg);
    font-weight: 600;
    line-height: var(--platforma-leading-heading);
    letter-spacing: -0.01em;
    color: var(--platforma-ink-primary);
    margin: 0;
}

.platforma-title {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-title);
    font-weight: 600;
    line-height: 1.35;
    color: var(--platforma-ink-primary);
    margin: 0;
}

.platforma-body-lg {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-lg);
    font-weight: 400;
    line-height: var(--platforma-leading-body);
    color: var(--platforma-ink-primary);
    margin: 0;
}

.platforma-body {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-base);
    font-weight: 400;
    line-height: var(--platforma-leading-body);
    color: var(--platforma-ink-primary);
    margin: 0;
}

.platforma-body-sm {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-sm);
    font-weight: 400;
    line-height: 1.5;
    color: var(--platforma-ink-primary);
    margin: 0;
}

.platforma-caption {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-sm);
    font-weight: 400;
    line-height: 1.5;
    color: var(--platforma-ink-muted);
    margin: 0;
}

.platforma-overline {
    font-family: var(--platforma-font-family);
    font-size: var(--platforma-text-overline);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--platforma-ink-muted);
    margin: 0;
}

/* Ink-on-dark variants — use inside .platforma-page-banner / dark-chrome
   surfaces so contrast stays AA without per-page overrides. */
.platforma-page-banner .platforma-display-1,
.platforma-page-banner .platforma-display-2,
.platforma-page-banner .platforma-headline,
.platforma-page-banner .platforma-title-lg,
.platforma-page-banner .platforma-title,
.platforma-page-banner .platforma-body-lg,
.platforma-page-banner .platforma-body,
.platforma-page-banner .platforma-body-sm {
    color: var(--platforma-text-on-dark);
}

.platforma-page-banner .platforma-caption,
.platforma-page-banner .platforma-overline {
    color: var(--platforma-text-on-dark-muted);
}

/* Numeric tabular alignment — use on KPI cards, tables with numbers,
   stat-bars so digits align at the decimal/comma. */
.platforma-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}