/* ============================================================================
   DIALR — TYPOGRAPHY
   ----------------------------------------------------------------------------
   Typography is the product's identity, not decoration. Three voices:

     DISPLAY  wide, heavy, uppercase, tight tracking. Names, screen titles,
              times of day. This is what makes DIALR look like an editorial
              object rather than an Android utility.
     TEXT     neutral grotesque, sentence case. Everything readable.
     NUMERIC  tabular figures. Durations, timers, the dial readout — anything
              that must not reflow as digits change.

   Every class below is a *role*, not a size. Components ask for a role.
   ========================================================================== */

.u-display,
.t-display-xl, .t-display-l, .t-display-m, .t-display-s {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  text-transform: uppercase;
  line-height: var(--lh-flat);
  letter-spacing: var(--tr-tighter);
  /* Roboto Flex / Archivo variable width axis — silently ignored elsewhere. */
  font-variation-settings: "wdth" 112, "wght" 800;
  font-stretch: 112%;
}

.t-display-xl { font-size: calc(var(--t-display-xl) * var(--fs)); }
.t-display-l  { font-size: calc(var(--t-display-l)  * var(--fs)); }
.t-display-m  { font-size: calc(var(--t-display-m)  * var(--fs)); }
.t-display-s  { font-size: calc(var(--t-display-s)  * var(--fs)); letter-spacing: var(--tr-tight); }

/* Screen titles: RECENTS / HISTORY / CONTACTS. Optically flush-left. */
.t-screen-title {
  font-family: var(--font-display);
  font-weight: var(--w-ultra);
  font-size: calc(var(--t-display-l) * var(--fs));
  text-transform: uppercase;
  letter-spacing: var(--tr-tightest);
  line-height: var(--lh-flat);
  font-variation-settings: "wdth" 118, "wght" 900;
  margin-left: -0.045em;
}

/* The surname that sits small above a big first name. */
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: calc(var(--t-label) * var(--fs));
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  line-height: var(--lh-tight);
  color: var(--fg-secondary);
  font-variation-settings: "wdth" 108, "wght" 700;
}

.t-title    { font-family: var(--font-text); font-weight: var(--w-semibold);
              font-size: calc(var(--t-title) * var(--fs)); letter-spacing: var(--tr-tight);
              line-height: var(--lh-snug); }
.t-title-lg { font-family: var(--font-text); font-weight: var(--w-bold);
              font-size: calc(var(--t-title-lg) * var(--fs)); letter-spacing: var(--tr-tight);
              line-height: var(--lh-snug); }

.t-body     { font-size: calc(var(--t-body) * var(--fs)); line-height: var(--lh-normal); }
.t-body-sm  { font-size: calc(var(--t-body-sm) * var(--fs)); line-height: var(--lh-normal); }
.t-body-lg  { font-size: calc(var(--t-body-lg) * var(--fs)); line-height: var(--lh-normal); }
.t-caption  { font-size: calc(var(--t-caption) * var(--fs)); line-height: var(--lh-snug);
              color: var(--fg-tertiary); }

/* All-caps micro labels. The connective tissue of the whole UI. */
.t-label {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: calc(var(--t-label) * var(--fs));
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  line-height: var(--lh-snug);
  font-variation-settings: "wdth" 105, "wght" 700;
}
.t-micro {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: calc(var(--t-micro) * var(--fs));
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  line-height: var(--lh-snug);
}

.t-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: var(--tr-tight);
}

/* Colour roles, so components never hard-code a colour var in markup. */
.c-fg   { color: var(--fg); }
.c-2    { color: var(--fg-secondary); }
.c-3    { color: var(--fg-tertiary); }
.c-4    { color: var(--fg-quaternary); }
.c-acc  { color: var(--accent); }
.c-acc2 { color: var(--accent-2); }
.c-pos  { color: var(--positive); }
.c-neg  { color: var(--negative); }
.c-warn { color: var(--warn); }
.c-note { color: var(--note); }

/* Truncation helpers — used everywhere names meet fixed-width cards. */
.u-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.u-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
             overflow: hidden; }
.u-balance { text-wrap: balance; }