/* ============================================================================
   AlphaOro typography — SINGLE SOURCE OF TRUTH
   ----------------------------------------------------------------------------
   Loaded globally by base.html. Components use the text-style CLASSES below
   (.t-section, .t-kpi, .t-body, .t-sub, .t-tablehead) — never raw
   font-size / font-family / font-weight. See CLAUDE.md "Typography".

   Rule: --font-brand (serif) is the "Weighbridge" wordmark ONLY. Everything
   else is --font-sans. Serif section headings are retired.

   Rollout: applied to the Weighbridge dashboard first (reference). Lab + Pad
   dashboards cascade next; the grep lint (scripts/check_typography.py) turns
   on CI-wide once all three are converted.
   ========================================================================= */

:root {
  /* --font-sans / --font-serif live in app.css. --font-brand aliases the
     serif face but names its ONLY sanctioned use: the wordmark. */
  --font-brand: var(--font-serif);

  /* Ink ramp for text (—ink already exists in app.css as the darkest). */
  --ink:   var(--ink, #322618);        /* body / values */
  --ink-2: #6f6250;                    /* section headings, muted */
  --ink-3: #9b8d76;                    /* sub-lines, meta, table headers */
}

/* Numerals line up everywhere (KPIs, tables, money). */
:root { font-variant-numeric: tabular-nums; }

/* ---- Text styles (the ONLY sanctioned type ramp) ------------------------ */

.t-section {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-2);
  margin: 0;
}

.t-kpi {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.t-kpi-unit {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
}

.t-body {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

.t-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
}

.t-tablehead {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-3);
}

/* Role Permissions screen (V29.034) — sans throughout, per house system.
   Kept here so the component CSS carries zero raw font declarations. */
.t-perm-title  { font-family: var(--font-sans); font-size: 22px;   font-weight: 800; letter-spacing: -0.3px; color: var(--ink); }
.t-perm-h2     { font-family: var(--font-sans); font-size: 18px;   font-weight: 800; letter-spacing: -0.2px; color: var(--ink); margin: 0; }
.t-perm-module { font-family: var(--font-sans); font-size: 13px;   font-weight: 700; color: var(--ink); }
.t-perm-level  { font-family: var(--font-sans); font-size: 12px;   font-weight: 800; }
.t-perm-seg    { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; }
.t-perm-cap    { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; line-height: 1.45; color: var(--ink-2); }
.t-perm-flag   { font-family: var(--font-sans); font-size: 9px;    font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.t-perm-num    { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* The wordmark — the sole serif surface. */
.t-brand { font-family: var(--font-brand); }