/* ============================================================
   SERVY — TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* families */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ---- Type scale (mobile-first, px) ----
     name        size / line-height / weight / tracking            */
  --t-display:        2.125rem;  /* 34px — check-in timers, big numbers */
  --t-display-lh:     1.05; /* @kind other */
  --t-h1:             1.625rem;  /* 26px — screen titles            */
  --t-h1-lh:          1.18; /* @kind other */
  --t-h2:             1.3125rem; /* 21px — section headers          */
  --t-h2-lh:          1.25; /* @kind other */
  --t-h3:             1.0625rem; /* 17px — card titles              */
  --t-h3-lh:          1.35; /* @kind other */
  --t-body:           0.9375rem; /* 15px — default body             */
  --t-body-lh:        1.5; /* @kind other */
  --t-sm:             0.8125rem; /* 13px — secondary / meta         */
  --t-sm-lh:          1.45; /* @kind other */
  --t-xs:             0.6875rem; /* 11px — labels, badges, captions */
  --t-xs-lh:          1.3; /* @kind other */

  /* tracking */
  --tracking-tight:   -0.02em; /* @kind other */
  --tracking-snug:    -0.011em; /* @kind other */
  --tracking-normal:  0; /* @kind other */
  --tracking-wide:    0.04em; /* @kind other */
  --tracking-caps:    0.07em; /* @kind other */

  /* numeric figures — for data tables & timers */
  --fvn-tabular: "tnum" 1, "lnum" 1; /* @kind other */
}

/* ---- Base element defaults ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  letter-spacing: var(--tracking-snug);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Utility type classes ---- */
.t-eyebrow {
  font-size: var(--t-xs);
  line-height: var(--t-xs-lh);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.t-display {
  font-size: var(--t-display);
  line-height: var(--t-display-lh);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.t-h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.t-h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.t-h3 { font-size: var(--t-h3); line-height: var(--t-h3-lh); font-weight: var(--fw-semibold); color: var(--text-strong); }
.t-body { font-size: var(--t-body); line-height: var(--t-body-lh); }
.t-sm { font-size: var(--t-sm); line-height: var(--t-sm-lh); }
.t-xs { font-size: var(--t-xs); line-height: var(--t-xs-lh); }
.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: var(--fvn-tabular);
  letter-spacing: 0;
}
.tabular { font-feature-settings: var(--fvn-tabular); }
