/* ==========================================================================
   Asign Portal — Typography
   --------------------------------------------------------------------------
   The 9 Figma text styles, as reusable classes, plus sensible defaults for
   heading/paragraph elements. Requires tokens.css.

   Figma style        Class              Element default
   -----------------  -----------------  ---------------
   Display/Title      .text-display      —
   Heading/H1         .text-h1           h1
   Heading/H2         .text-h2           h2, h3
   Body/Large         .text-body-lg      —
   Body/Base          .text-body         p (inherited from body)
   Body/Small         .text-body-sm      small
   Label/Field        .text-label        label, th
   Action/Button      .text-action       (buttons — see component css)
   Action/Link        .text-link         (inline links use element <a>)

   Brand rule: emphasis via WEIGHT or COLOUR, never italics.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type-style utilities
   -------------------------------------------------------------------------- */
.text-display {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
}

.text-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
}

.text-h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
}

.text-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
}

.text-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

.text-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.text-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-ls);
}

.text-action {
  font-family: var(--font-action);
  font-weight: var(--weight-semibold);
  font-size: var(--text-action-size);
  line-height: var(--text-action-lh);
  letter-spacing: var(--text-action-ls);
}

.text-link {
  font-family: var(--font-action);
  font-weight: var(--weight-semibold);
  font-size: var(--text-link-size);
  line-height: var(--text-link-lh);
}

/* --------------------------------------------------------------------------
   Colour helpers
   -------------------------------------------------------------------------- */
.text-muted    { color: var(--color-text-muted); }
.text-primary  { color: var(--color-primary); }
.text-on-primary { color: var(--color-on-primary); }

/* --------------------------------------------------------------------------
   Element defaults — heading tags carry their style without needing a class
   -------------------------------------------------------------------------- */
h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
}

h2,
h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

small {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

label {
  font-weight: var(--weight-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-ls);
}