/*
  typography.css — Nium Portal Type Scale
  ────────────────────────────────────────
  Link after tokens.css, before page styles.

  <link rel="stylesheet" href="tokens.css">
  <link rel="stylesheet" href="typography.css">

  17-token scale. All weights consolidated to 400 / 500 / 600.
  14px/600 and 14px/700 instances → --text-body-strong (500) in Phase 3.

  Usage:
    font-size: var(--text-display-size);
    font-weight: var(--text-display-weight);

  Or use the shorthand mixin classes:
    .t-display, .t-kpi, .t-page-title, etc.
*/

:root {

  /* ── Scale ──────────────────────────────────────────────────────────── */

  /* Display — dashboard hero KPI numbers */
  --text-display-size:         40px;
  --text-display-weight:       500;

  /* KPI — secondary stat cards */
  --text-kpi-size:             26px;
  --text-kpi-weight:           500;

  /* Page title — all page h1s */
  --text-page-title-size:      24px;
  --text-page-title-weight:    500;

  /* Modal title — full modal and drawer headings */
  --text-modal-title-size:     20px;
  --text-modal-title-weight:   500;

  /* Section title — lightweight panels, sub-headings */
  --text-section-title-size:   16px;
  --text-section-title-weight: 500;

  /* Card title — wallet cards, profile card */
  --text-card-title-size:      15px;
  --text-card-title-weight:    600;

  /* Body strong — nav items, action titles, key labels */
  --text-body-strong-size:     14px;
  --text-body-strong-weight:   500;

  /* Body — general content, form values */
  --text-body-size:            14px;
  --text-body-weight:          400;

  /* UI — filter inputs, table cell content */
  --text-ui-size:              13.5px;
  --text-ui-weight:            400;

  /* Nav — sub-nav items, secondary actions */
  --text-nav-size:             13px;
  --text-nav-weight:           500;

  /* Small — confirmations, env modal body */
  --text-small-size:           13px;
  --text-small-weight:         400;

  /* Label — table headers, card section labels */
  --text-label-size:           12px;
  --text-label-weight:         600;

  /* Caption — hints, timestamps, meta text */
  --text-caption-size:         12px;
  --text-caption-weight:       400;

  /* Tag — status tags, badges */
  --text-tag-size:             11.5px;
  --text-tag-weight:           500;

  /* Overline — column headers, nav flyout labels */
  --text-overline-size:        11px;
  --text-overline-weight:      600;

  /* Micro — tooltips, dropdown option labels */
  --text-micro-size:           11px;
  --text-micro-weight:         400;

  /* Badge — nav badge counts, status pill text */
  --text-badge-size:           10px;
  --text-badge-weight:         500;

  /* ── Shared ─────────────────────────────────────────────────────────── */
  --text-font-family:          -apple-system, BlinkMacSystemFont, 'Inter',
                               'Segoe UI', sans-serif;
  --text-line-height-tight:    1.2;   /* headings, KPIs */
  --text-line-height-base:     1.5;   /* body, UI */
  --text-line-height-loose:    1.65;  /* captions, hints */

}

/* ── Utility classes ───────────────────────────────────────────────────── */
/* Optional — use in HTML or as reference for React component props         */

.t-display      { font-size: var(--text-display-size);       font-weight: var(--text-display-weight);       line-height: var(--text-line-height-tight); }
.t-kpi          { font-size: var(--text-kpi-size);           font-weight: var(--text-kpi-weight);           line-height: var(--text-line-height-tight); }
.t-page-title   { font-size: var(--text-page-title-size);    font-weight: var(--text-page-title-weight);    line-height: var(--text-line-height-tight); }
.t-modal-title  { font-size: var(--text-modal-title-size);   font-weight: var(--text-modal-title-weight);   line-height: var(--text-line-height-tight); }
.t-section-title{ font-size: var(--text-section-title-size); font-weight: var(--text-section-title-weight); line-height: var(--text-line-height-base);  }
.t-card-title   { font-size: var(--text-card-title-size);    font-weight: var(--text-card-title-weight);    line-height: var(--text-line-height-base);  }
.t-body-strong  { font-size: var(--text-body-strong-size);   font-weight: var(--text-body-strong-weight);   line-height: var(--text-line-height-base);  }
.t-body         { font-size: var(--text-body-size);          font-weight: var(--text-body-weight);          line-height: var(--text-line-height-base);  }
.t-ui           { font-size: var(--text-ui-size);            font-weight: var(--text-ui-weight);            line-height: var(--text-line-height-base);  }
.t-nav          { font-size: var(--text-nav-size);           font-weight: var(--text-nav-weight);           line-height: var(--text-line-height-base);  }
.t-small        { font-size: var(--text-small-size);         font-weight: var(--text-small-weight);         line-height: var(--text-line-height-base);  }
.t-label        { font-size: var(--text-label-size);         font-weight: var(--text-label-weight);         line-height: var(--text-line-height-base);  }
.t-caption      { font-size: var(--text-caption-size);       font-weight: var(--text-caption-weight);       line-height: var(--text-line-height-loose); }
.t-tag          { font-size: var(--text-tag-size);           font-weight: var(--text-tag-weight);           line-height: var(--text-line-height-tight); }
.t-overline     { font-size: var(--text-overline-size);      font-weight: var(--text-overline-weight);      line-height: var(--text-line-height-tight); letter-spacing: 0.06em; text-transform: uppercase; }
.t-micro        { font-size: var(--text-micro-size);         font-weight: var(--text-micro-weight);         line-height: var(--text-line-height-loose); }
.t-badge        { font-size: var(--text-badge-size);         font-weight: var(--text-badge-weight);         line-height: var(--text-line-height-tight); }

.travel-title {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-text-primary);
}

.travel-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 32px 0 24px;
}