/* ==========================================================================
   TrainerPlatform - Typography
   --------------------------------------------------------------------------
   A fluid type scale built on system fonts. No webfont request is made, so
   there is no FOUT and no third-party dependency on the critical path.
   Swap --tp-font-sans for a self-hosted family when branding is finalised.
   ========================================================================== */

:root {
  /* Families */
  --tp-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --tp-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Weights */
  --tp-weight-regular:  400;
  --tp-weight-medium:   500;
  --tp-weight-semibold: 600;
  --tp-weight-bold:     700;

  /* ------------------------------------------------------------------ *
   * Fluid scale. Each step interpolates between a mobile and a desktop *
   * size across the 20rem - 80rem viewport range, so no step needs a   *
   * media query of its own.                                            *
   * ------------------------------------------------------------------ */
  --tp-text-2xs: 0.6875rem;                                  /* 11px, static */
  --tp-text-xs:  0.75rem;                                    /* 12px, static */
  --tp-text-sm:  0.875rem;                                   /* 14px, static */
  --tp-text-base: clamp(0.9375rem, 0.90rem + 0.18vw, 1rem);        /* 15 - 16 */
  --tp-text-lg:  clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);    /* 17 - 19 */
  --tp-text-xl:  clamp(1.1875rem, 1.10rem + 0.42vw, 1.375rem);     /* 19 - 22 */
  --tp-text-2xl: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);       /* 22 - 28 */
  --tp-text-3xl: clamp(1.625rem, 1.41rem + 1.05vw, 2.25rem);       /* 26 - 36 */
  --tp-text-4xl: clamp(1.9375rem, 1.58rem + 1.75vw, 2.9375rem);    /* 31 - 47 */

  /* Line heights - tighter as size grows */
  --tp-leading-none:    1;
  --tp-leading-tight:   1.2;
  --tp-leading-snug:    1.35;
  --tp-leading-normal:  1.55;
  --tp-leading-relaxed: 1.7;

  /* Tracking - negative on display sizes, positive on small caps */
  --tp-tracking-tight:  -0.02em;
  --tp-tracking-snug:   -0.01em;
  --tp-tracking-normal: 0;
  --tp-tracking-wide:   0.02em;
  --tp-tracking-caps:   0.06em;

  /* Measure - comfortable reading width for prose */
  --tp-measure: 68ch;
}

/* --------------------------------------------------------------------
   Headings. Sized by role, not by raw tag, so a section can promote or
   demote a heading level without changing its visual weight.
   -------------------------------------------------------------------- */
h1, .tp-h1,
h2, .tp-h2,
h3, .tp-h3,
h4, .tp-h4,
h5, .tp-h5,
h6, .tp-h6 {
  margin: 0;
  color: var(--tp-text-primary);
  font-weight: var(--tp-weight-semibold);
  line-height: var(--tp-leading-tight);
  text-wrap: balance;
}

h1, .tp-h1 { font-size: var(--tp-text-4xl); letter-spacing: var(--tp-tracking-tight); }
h2, .tp-h2 { font-size: var(--tp-text-3xl); letter-spacing: var(--tp-tracking-tight); }
h3, .tp-h3 { font-size: var(--tp-text-2xl); letter-spacing: var(--tp-tracking-snug); }
h4, .tp-h4 { font-size: var(--tp-text-xl);  letter-spacing: var(--tp-tracking-snug); }
h5, .tp-h5 { font-size: var(--tp-text-lg); }
h6, .tp-h6 { font-size: var(--tp-text-base); font-weight: var(--tp-weight-semibold); }

/* --------------------------------------------------------------------
   Body copy
   -------------------------------------------------------------------- */
p, .tp-body {
  margin: 0;
  font-size: var(--tp-text-base);
  line-height: var(--tp-leading-normal);
  color: var(--tp-text-primary);
}

.tp-prose {
  max-width: var(--tp-measure);
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-4);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------
   Supporting text roles
   -------------------------------------------------------------------- */
.tp-lead {
  font-size: var(--tp-text-lg);
  line-height: var(--tp-leading-relaxed);
  color: var(--tp-text-secondary);
  max-width: var(--tp-measure);
  text-wrap: pretty;
}

.tp-small    { font-size: var(--tp-text-sm); line-height: var(--tp-leading-snug); }
.tp-caption  { font-size: var(--tp-text-xs); line-height: var(--tp-leading-snug); color: var(--tp-text-muted); }
.tp-muted    { color: var(--tp-text-muted); }
.tp-secondary{ color: var(--tp-text-secondary); }

/* Section eyebrow / overline label */
.tp-overline {
  font-size: var(--tp-text-2xs);
  font-weight: var(--tp-weight-semibold);
  letter-spacing: var(--tp-tracking-caps);
  text-transform: uppercase;
  color: var(--tp-text-muted);
}

/* Tabular figures keep numeric columns from shifting as values change. */
.tp-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

code, kbd, samp, pre, .tp-mono {
  font-family: var(--tp-font-mono);
  font-size: 0.9em;
}

code:not(pre code) {
  padding: 0.15em 0.4em;
  border-radius: var(--tp-radius-sm);
  background: var(--tp-bg-sunken);
  border: var(--tp-border-thin) solid var(--tp-border-subtle);
  color: var(--tp-text-primary);
}

/* Truncation helpers */
.tp-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}