/* ============================================================
   WEAR AT WORK — Typography tokens
   Display = Montserrat (bold, uppercase, industrial).
   Body/UI = Mulish (clean humanist sans, Greek).
   ============================================================ */
:root {
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* Type scale (px) — display sizes are set uppercase + tight */
  --fs-display-2xl: 72px;
  --fs-display-xl: 56px;
  --fs-display-lg: 44px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  /* Line heights */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.2; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing — headings run tight, labels run wide */
  --ls-tight: -0.02em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  /* uppercase eyebrows / buttons */
  --ls-wider: 0.12em; /* @kind font */
}