/**
 * GRAC EPR — typography + icon sizing layer (Inter, JetBrains Mono, Lucide SVGs).
 * Load after app.css; uses variables from tokens.css.
 */

/* —— Base —— */
body {
  font-family: var(--epr-font-sans);
  font-size: var(--epr-type-body-fs);
  line-height: var(--epr-type-body-lh);
  font-weight: var(--epr-type-body-fw);
}

/* —— Lucide outline icons —— */
svg.epr-nav-ic {
  display: block;
  width: var(--epr-icon-sidebar);
  height: var(--epr-icon-sidebar);
  flex-shrink: 0;
}

.epr-topbar-tools svg.epr-nav-ic,
.epr-topbar-menu svg.epr-nav-ic {
  width: var(--epr-icon-topbar);
  height: var(--epr-icon-topbar);
}

.epr-nav-ic-wrap {
  width: var(--epr-icon-sidebar);
  min-width: var(--epr-icon-sidebar);
}

.epr-nav-ic-wrap svg.epr-nav-ic {
  width: var(--epr-icon-sidebar);
  height: var(--epr-icon-sidebar);
}

.epr-topbar-menu {
  font-size: 0;
  line-height: 0;
}

.epr-notify-btn {
  font-size: 0;
}

.epr-notify-btn__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.epr-notify-btn__ic svg.epr-nav-ic {
  width: var(--epr-icon-topbar);
  height: var(--epr-icon-topbar);
}

.epr-user-chevron {
  display: inline-flex;
  align-items: center;
  margin-left: var(--epr-space-1);
  color: var(--epr-neutral-500);
}

.epr-user-chevron svg.epr-nav-ic {
  width: var(--epr-icon-inline);
  height: var(--epr-icon-inline);
}

/* —— Page chrome —— */
.epr-topbar-brand {
  font-family: var(--epr-font-sans);
}

.epr-page-header h1 {
  font-family: var(--epr-font-sans);
  font-size: var(--epr-type-page-title-fs);
  line-height: var(--epr-type-page-title-lh);
  font-weight: var(--epr-type-page-title-fw);
}

.epr-page-header p {
  font-size: var(--epr-type-page-sub-fs);
  line-height: var(--epr-type-page-sub-lh);
  font-weight: var(--epr-type-page-sub-fw);
}

/* Staff / template detail title */
.epr-staff-detail__name {
  font-family: var(--epr-font-sans);
  font-size: var(--epr-type-section-fs);
  line-height: var(--epr-type-section-lh);
  font-weight: var(--epr-type-section-fw);
}

/* —— Card / section titles —— */
.tpl-page .card-hd {
  font-size: var(--epr-type-card-title-fs);
  line-height: var(--epr-type-card-title-lh);
  font-weight: var(--epr-type-card-title-fw);
}

/* —— Tables —— */
.epr-table {
  font-size: var(--epr-type-table-cell-fs);
  line-height: var(--epr-type-table-cell-lh);
  font-weight: var(--epr-type-table-cell-fw);
}

.epr-table thead th {
  font-size: var(--epr-type-table-head-fs);
  line-height: var(--epr-type-table-head-lh);
  font-weight: var(--epr-type-table-head-fw);
  letter-spacing: 0.04em;
}

.epr-table th.epr-table-num,
.epr-table td.epr-table-num {
  text-align: right;
  font-variant-numeric: var(--epr-tabular);
}

/* —— KPI cards (dashboard + tpl KPI grid) —— */
.tpl-page .kpi-grid > article.card .metric .label {
  font-size: var(--epr-type-kpi-label-fs);
  line-height: var(--epr-type-kpi-label-lh);
  font-weight: var(--epr-type-kpi-label-fw);
  letter-spacing: 0.06em;
}

.tpl-page .kpi-grid > article.card .metric .value {
  font-size: var(--epr-type-kpi-value-fs);
  line-height: var(--epr-type-kpi-value-lh);
  font-weight: var(--epr-type-kpi-value-fw);
  font-variant-numeric: var(--epr-tabular);
}

.tpl-page .kpi-grid > article.card .metric .value strong {
  font-weight: var(--epr-type-kpi-value-fw);
}

.tpl-page .kpi-grid > article.card .metric::before {
  background-size: var(--epr-icon-kpi);
}

.tpl-page .metric .value {
  font-variant-numeric: var(--epr-tabular);
}

/* UC-RF-03 inline KPI strip */
.epr-ucrf03-kpi__label {
  font-size: var(--epr-type-kpi-label-fs);
  line-height: var(--epr-type-kpi-label-lh);
  font-weight: var(--epr-type-kpi-label-fw);
}

.epr-ucrf03-kpi__value {
  font-size: var(--epr-type-kpi-value-fs);
  line-height: var(--epr-type-kpi-value-lh);
  font-weight: var(--epr-type-kpi-value-fw);
  font-variant-numeric: var(--epr-tabular);
}

/* —— Code / reference (JetBrains Mono only here) —— */
.epr-app code,
.tpl-page code {
  font-family: var(--epr-font-mono);
  font-size: var(--epr-type-code-fs);
  line-height: var(--epr-type-code-lh);
  font-weight: var(--epr-type-code-fw);
  font-variant-numeric: tabular-nums;
}

.epr-staff-detail__code,
.epr-staff-detail__code-inline {
  font-family: var(--epr-font-mono);
  font-size: var(--epr-type-code-fs);
  line-height: var(--epr-type-code-lh);
  font-weight: var(--epr-type-code-fw);
  font-variant-numeric: tabular-nums;
}

/* —— AI / section inline icons —— */
.epr-ucrf03-ai-shell__mark .epr-nav-ic {
  width: var(--epr-icon-section);
  height: var(--epr-icon-section);
}

.epr-ucrf03-ai-col__ic .epr-nav-ic {
  width: var(--epr-icon-section);
  height: var(--epr-icon-section);
}

@media (max-width: 900px) {
  .epr-ucrf03-ai-col__ic .epr-nav-ic {
    width: var(--epr-icon-inline);
    height: var(--epr-icon-inline);
  }
}

.epr-nav-label {
  font-size: var(--epr-type-label-fs);
  line-height: var(--epr-type-label-lh);
  font-weight: var(--epr-type-label-fw);
}

/* —— Numeric scan (weights, progress, targets) —— */
.epr-numeric {
  font-variant-numeric: var(--epr-tabular);
}

/* —— Utility text styles —— */
.epr-type-page-title {
  font-family: var(--epr-font-sans);
  font-size: var(--epr-type-page-title-fs);
  line-height: var(--epr-type-page-title-lh);
  font-weight: var(--epr-type-page-title-fw);
  letter-spacing: -0.02em;
}

.epr-type-page-sub {
  font-size: var(--epr-type-page-sub-fs);
  line-height: var(--epr-type-page-sub-lh);
  font-weight: var(--epr-type-page-sub-fw);
}

.epr-type-section {
  font-family: var(--epr-font-sans);
  font-size: var(--epr-type-section-fs);
  line-height: var(--epr-type-section-lh);
  font-weight: var(--epr-type-section-fw);
  letter-spacing: -0.02em;
}

.epr-type-card-title {
  font-family: var(--epr-font-sans);
  font-size: var(--epr-type-card-title-fs);
  line-height: var(--epr-type-card-title-lh);
  font-weight: var(--epr-type-card-title-fw);
}

.epr-type-body {
  font-size: var(--epr-type-body-fs);
  line-height: var(--epr-type-body-lh);
  font-weight: var(--epr-type-body-fw);
}

.epr-type-body-strong {
  font-size: var(--epr-type-body-fs);
  line-height: var(--epr-type-body-lh);
  font-weight: var(--epr-type-body-strong-fw);
}

.epr-type-label {
  font-size: var(--epr-type-label-fs);
  line-height: var(--epr-type-label-lh);
  font-weight: var(--epr-type-label-fw);
}

.epr-type-code {
  font-family: var(--epr-font-mono);
  font-size: var(--epr-type-code-fs);
  line-height: var(--epr-type-code-lh);
  font-weight: var(--epr-type-code-fw);
  font-variant-numeric: tabular-nums;
}

/* —— Dashboard bespoke KPI headers —— */
.epr-dash-kpi-section__label,
.epr-dash-kpi-tier__label {
  font-size: var(--epr-type-kpi-label-fs);
  line-height: var(--epr-type-kpi-label-lh);
  font-weight: var(--epr-type-kpi-label-fw);
}

.epr-dash-panel__title {
  font-size: var(--epr-type-card-title-fs);
  line-height: var(--epr-type-card-title-lh);
  font-weight: var(--epr-type-card-title-fw);
}

.epr-dash-panel--matrix .epr-dash-panel__title,
.epr-dash-panel--actions .epr-dash-panel__title {
  font-size: var(--epr-type-section-fs);
  line-height: var(--epr-type-section-lh);
  font-weight: var(--epr-type-section-fw);
}