/* ──────────────────────────────────────────────────────────────────
 * Communikit — Typography system
 *
 * A role-based text system that scales across the three platforms
 * (admin portal · mobile app · member website). It extends the
 * primitive --fs-* / --fw-* / --lh-* / --ls-* tokens already in
 * colors_and_type.css — every role here resolves to those primitives
 * so existing `h1`, `.card-title`, `.eyebrow`, `p`, `.caption`, `code`
 * styles keep working unchanged.
 *
 * Roles (size axis goes xl → sm where applicable):
 *
 *   .t-display-xl     72px ExtraBold     marketing hero only
 *   .t-display-lg     56px ExtraBold     cover-slide statements
 *   .t-display-md     48px ExtraBold     section openers, brand pages
 *   .t-display-sm     32px ExtraBold     dashboard hero, landing
 *
 *   .t-slide-display     96px ExtraBold  deck cover statement
 *   .t-slide-display-sm  72px ExtraBold  deck section + slide titles
 *   .t-slide-body        28/40 Regular   deck reading copy
 *
 *   .t-headline-xl    28px Bold          page h1 (existing --fs-h1)
 *   .t-headline-lg    22px Bold          section h2 (existing --fs-h2)
 *   .t-headline-md    20px Bold          h3 / feature card (--fs-h3)
 *   .t-headline-sm    18px Bold          small heading
 *
 *   .t-title-lg       17px Bold          card title (existing --fs-card-title)
 *   .t-title-md       15px SemiBold      list-row title, mobile h2
 *   .t-title-sm       14px SemiBold      small card / nav row
 *
 *   .t-body-lg        17px Regular       intro paragraphs (1.55)
 *   .t-body-md        14px Regular       default body (existing)
 *   .t-body-sm        13px Regular       dense body / table cells
 *
 *   .t-label-lg       14px Bold          primary button label
 *   .t-label-md       13px SemiBold      secondary button / small CTA
 *   .t-label-sm       12px SemiBold      chip / metadata pill
 *
 *   .t-caption-lg     13px Medium        post metadata
 *   .t-caption-md     12px Medium        default caption (existing)
 *   .t-caption-sm     11px Medium        microcopy
 *
 *   .t-eyebrow-lg     13px ExtraBold     +0.08em tracked
 *   .t-eyebrow-md     11px ExtraBold     default eyebrow (existing)
 *   .t-eyebrow-sm     10px Bold          +0.06em tracked, dense UI
 *
 *   .t-stat-xl        48px ExtraBold     KPI hero number
 *   .t-stat-lg        28px ExtraBold     stat card (existing pattern)
 *   .t-stat-md        20px Bold          inline counter
 *
 *   .t-mono-md        13px Regular       monospace body
 *   .t-mono-sm        11px Medium        monospace caption
 *
 * Color helpers (lean on tokens, never invent colours):
 *
 *   .t-fg, .t-fg-muted, .t-fg-strong, .t-fg-on-dark
 *   .t-brand, .t-brand-strong, .t-danger, .t-warning, .t-info
 *
 * Modifiers:
 *
 *   .t-italic, .t-tabular, .t-balance, .t-pretty, .t-truncate,
 *   .t-clamp-2, .t-clamp-3, .t-uppercase, .t-no-wrap
 * ────────────────────────────────────────────────────────────────── */

:root {
  /* — Extra size primitives (compose on top of existing --fs-*) — */
  --fs-display-xl: 72px;   /* hero */
  --fs-display-lg: 56px;   /* alias to existing --fs-display */
  --fs-display-md: 48px;
  --fs-display-sm: 32px;
  --fs-headline-sm: 18px;
  --fs-stat-xl: 48px;

  /* — Slide step (deck layer) —
   * The roles above top out at 56px display and 14/17px body, which are
   * UI sizes: 17px body on a 1920 frame is unusable and 56px is modest
   * for a cover. These three are the projected-deck step. They are roles
   * here rather than literals in slides/kit.css so a slide layout never
   * invents a size, and so the floor is enforceable — nothing below 24px
   * may carry slide copy, the 11px reference pill and the eyebrow being
   * labels rather than reading copy. */
  --fs-slide-display: 96px;
  --fs-slide-display-sm: 72px;
  --fs-slide-body: 28px;
  --lh-slide-body: 1.4286;  /* @kind font */ /* 28 / 40 */

  /* — Line-height primitives (named) — */
  --lh-display: 1.05;  /* @kind font */
  --lh-headline: 1.2;  /* @kind font */
  --lh-title: 1.35;    /* @kind font */
  --lh-body: 1.55;     /* @kind font */
  --lh-flat: 1;        /* @kind font */
  /* keep the existing --lh-tight / --lh-snug / --lh-base / --lh-relaxed */

  /* — Letter-spacing primitives — */
  --ls-display: -0.02em;      /* @kind font */
  --ls-headline: -0.005em;    /* @kind font */
  --ls-body: 0em;             /* @kind font */
  --ls-eyebrow-loose: 0.12em; /* @kind font */
  /* existing --ls-eyebrow / --ls-eyebrow-tight / --ls-tracked still apply */

  /* — Platform-density toggles —
   * Set --t-density: "comfortable" (default) | "compact" | "spacious"
   * on an ancestor element to scale body / title down or up by one step.
   * The role classes read this implicitly. */
  --t-step: 1; /* @kind other */
}

[data-density="compact"]    { --t-step: 0.93; /* @kind other */ }
[data-density="spacious"]   { --t-step: 1.07; /* @kind other */ }

/* ────────────────────────────── DISPLAY ─────────────────────────── */
.t-display-xl, .t-display-lg, .t-display-md, .t-display-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
  text-wrap: balance;
}
.t-display-xl { font-size: var(--fs-display-xl); }
.t-display-lg { font-size: var(--fs-display-lg); letter-spacing: -0.015em; }
.t-display-md { font-size: var(--fs-display-md); letter-spacing: -0.015em; }
.t-display-sm { font-size: var(--fs-display-sm); letter-spacing: -0.01em; }

/* ──────────────────────── SLIDE (deck layer) ────────────────────── */
/* ExtraBold on both display sizes, per the standing rule that display
 * leans ExtraBold. Slide body stays Regular. Deliberately absent from
 * the 480px mobile cap at the foot of this file: a deck is a fixed
 * 1920×1080 or 1440×1080 frame that scales as a whole, so shrinking its
 * type at a narrow viewport would fight the frame's own scaling. */
.t-slide-display, .t-slide-display-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  text-wrap: balance;
}
.t-slide-display    { font-size: var(--fs-slide-display); }
.t-slide-display-sm { font-size: var(--fs-slide-display-sm); }
.t-slide-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-slide-body);
  line-height: var(--lh-slide-body);
  letter-spacing: var(--ls-body);
  color: var(--fg);
  text-wrap: pretty;
}

/* ───────────────────────────── HEADLINE ─────────────────────────── */
.t-headline-2xl, .t-headline-xl, .t-headline-lg, .t-headline-md, .t-headline-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  color: var(--fg-strong);
  text-wrap: balance;
}
.t-headline-2xl { font-size: var(--fs-h1-lg); line-height: 1.15; letter-spacing: -0.01em; }
.t-headline-xl { font-size: var(--fs-h1); line-height: 1.18; }
.t-headline-lg { font-size: var(--fs-h2); line-height: 1.22; }
.t-headline-md { font-size: var(--fs-h3); line-height: 1.25; }
.t-headline-sm { font-size: var(--fs-headline-sm); line-height: 1.3; }

/* ─────────────────────────────── TITLE ──────────────────────────── */
.t-title-lg, .t-title-md, .t-title-sm {
  font-family: var(--font-sans);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-body);
  color: var(--fg-strong);
}
.t-title-lg { font-size: var(--fs-card-title); font-weight: var(--fw-bold); }
.t-title-md { font-size: var(--fs-body-lg);    font-weight: var(--fw-semibold); }
.t-title-sm { font-size: var(--fs-body);       font-weight: var(--fw-semibold); }

/* ───────────────────────────────  BODY  ─────────────────────────── */
.t-body-xl, .t-body-lg, .t-body-md, .t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg);
}
.t-body-xl { font-size: var(--fs-body-xl);    line-height: 1.56; } /* 16 / 25 */
.t-body-lg { font-size: var(--fs-card-title); line-height: 1.55; } /* 17 / 26 */
.t-body-md { font-size: var(--fs-body);       line-height: 1.57; } /* 14 / 22 */
.t-body-sm { font-size: var(--fs-body-sm);    line-height: 1.54; } /* 13 / 20 */

/* ─────────────────────────────── LABEL ──────────────────────────── */
.t-label-lg, .t-label-md, .t-label-sm {
  font-family: var(--font-sans);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-body);
  color: var(--fg-strong);
}
.t-label-lg { font-size: var(--fs-body);    font-weight: var(--fw-bold); }
.t-label-md { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.t-label-sm { font-size: var(--fs-caption); font-weight: var(--fw-semibold); }

/* ─────────────────────────────  CAPTION  ────────────────────────── */
.t-caption-lg, .t-caption-md, .t-caption-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls-body);
  color: var(--fg-muted);
}
.t-caption-lg { font-size: var(--fs-body-sm); }
.t-caption-md { font-size: var(--fs-caption); }
.t-caption-sm { font-size: var(--fs-eyebrow); }

/* ─────────────────────────────  EYEBROW  ────────────────────────── */
.t-eyebrow-lg, .t-eyebrow-md, .t-eyebrow-sm {
  font-family: var(--font-sans);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-eyebrow-lg { font-size: var(--fs-body-sm); font-weight: var(--fw-extrabold);
                letter-spacing: var(--ls-eyebrow); }
.t-eyebrow-md { font-size: var(--fs-eyebrow); font-weight: var(--fw-extrabold);
                letter-spacing: var(--ls-eyebrow); }
.t-eyebrow-sm { font-size: 10px;              font-weight: var(--fw-bold);
                letter-spacing: var(--ls-eyebrow-tight); }

/* ──────────────────────────────── STAT ──────────────────────────── */
.t-stat-xl, .t-stat-lg, .t-stat-md {
  font-family: var(--font-sans);
  line-height: var(--lh-flat);
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.005em;
}
.t-stat-xl { font-size: var(--fs-stat-xl); font-weight: var(--fw-extrabold); letter-spacing: -0.015em; }
.t-stat-lg { font-size: var(--fs-h1);      font-weight: var(--fw-extrabold); }
.t-stat-md { font-size: var(--fs-h3);      font-weight: var(--fw-bold); }

/* ─────────────────────────────── MONO ───────────────────────────── */
.t-mono-md, .t-mono-sm {
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: var(--fg);
}
.t-mono-md { font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: 1.5; }
.t-mono-sm { font-size: var(--fs-eyebrow); font-weight: var(--fw-medium);  line-height: 1.5; }

/* ─────────────────────────  COLOUR HELPERS  ─────────────────────── */
.t-fg            { color: var(--fg) !important; }
.t-fg-strong     { color: var(--fg-strong) !important; }
.t-fg-muted      { color: var(--fg-muted) !important; }
.t-fg-on-dark    { color: var(--fg-on-dark) !important; }
.t-brand         { color: var(--brand-indicator) !important; }
.t-brand-strong  { color: var(--brand-text) !important; } /* 2.3.0: -strong is a fill value */
.t-danger        { color: var(--danger) !important; }
.t-warning       { color: var(--warning) !important; }
.t-info          { color: var(--info) !important; }
.t-success       { color: var(--success) !important; }
.t-accent        { color: var(--accent-purple) !important; }

/* ─────────────────────────────  MODIFIERS  ──────────────────────── */
.t-italic    { font-style: italic; }
.t-tabular   { font-variant-numeric: tabular-nums;
               font-feature-settings: "tnum" 1; }
.t-balance   { text-wrap: balance; }
.t-pretty    { text-wrap: pretty; }
.t-no-wrap   { white-space: nowrap; }
.t-uppercase { text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }

.t-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-clamp-2,
.t-clamp-3   { overflow: hidden; display: -webkit-box;
               -webkit-box-orient: vertical; }
.t-clamp-2   { -webkit-line-clamp: 2; line-clamp: 2; }
.t-clamp-3   { -webkit-line-clamp: 3; line-clamp: 3; }

/* ──────────────────────────  LINK STYLES  ───────────────────────── */
.t-link {
  color: var(--brand-text);
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--brand-text) 45%, transparent);
  transition: text-decoration-color 200ms cubic-bezier(0.2,0,0,1);
}
.t-link:hover { text-decoration-color: var(--brand-text); }
.t-link--quiet { color: inherit; text-decoration-color: transparent; }
.t-link--quiet:hover { text-decoration-color: currentColor; }

/* ───────────────────────  PLATFORM RESPONSIVE  ──────────────────── */
/* Mobile cap — display sizes scale down at narrow viewports so
 * marketing copy doesn't break the layout on a 375 px screen. The
 * admin portal and member-website never hit this width. */
@media (max-width: 480px) {
  .t-display-xl { font-size: 44px; }
  .t-display-lg { font-size: 38px; }
  .t-display-md { font-size: 30px; }
  .t-display-sm { font-size: 24px; }
  .t-headline-2xl { font-size: 28px; line-height: 1.18; }
  .t-headline-xl { font-size: 22px; line-height: 1.2; }
  .t-headline-lg { font-size: 18px; line-height: 1.25; }
  .t-body-lg { font-size: 15px; line-height: 1.55; }
}

/* ──────────────────────────────────────────────────────────────────
 * Element shortcuts — drop on raw markup for brand-correct defaults
 * without writing component CSS. These complement (not replace) the
 * existing h1 / h2 / h3 / .card-title / p / .eyebrow / code element
 * styles already declared in colors_and_type.css.
 * ────────────────────────────────────────────────────────────────── */
h4 { font-family: var(--font-sans); font-weight: var(--fw-bold);
     font-size: var(--fs-headline-sm); line-height: 1.3;
     color: var(--fg-strong); margin: 0; }

dl.t-defs { display: grid; gap: 4px 16px; grid-template-columns: max-content 1fr; }
dl.t-defs dt { font-weight: var(--fw-bold); color: var(--fg-strong); font-size: var(--fs-body-sm); }
dl.t-defs dd { margin: 0; color: var(--fg); font-size: var(--fs-body-sm); }

blockquote.t-quote {
  margin: 0; padding: 0 0 0 16px;
  border-left: 3px solid var(--brand-indicator);
  font-size: var(--fs-card-title); line-height: 1.55; color: var(--fg-strong);
  font-style: italic;
}

mark.t-mark {
  background: var(--brand-surface);
  color: var(--brand-text);
  padding: 0 4px; border-radius: 4px;
  font-weight: var(--fw-semibold);
}

kbd.t-kbd {
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 12px; padding: 2px 6px; border-radius: 6px;
  background: var(--bg-card-subtle); border: 1px solid var(--border-strong);
  color: var(--fg-strong);
}