/* ============================================================
   KSTK Predictive Mindset — Typography tokens
   Inter throughout; sizes mirror the website + portal type ramp.
   ============================================================ */

:root {
  /* Families */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Unbounded', 'Inter', sans-serif;
  --font-button:  'Inter', sans-serif; /* Circular Std substitute */
  --font-mono:    'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --weight-thin:     100;
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Type scale — font-size / line-height */
  --text-display-size: 64px;  --text-display-lh: 1.04;
  --text-h1-size:      48px;  --text-h1-lh:      1.08;
  --text-h2-size:      36px;  --text-h2-lh:      1.14;
  --text-h3-size:      28px;  --text-h3-lh:      1.2;
  --text-h4-size:      22px;  --text-h4-lh:      1.27;
  --text-title-size:   18px;  --text-title-lh:   1.33;
  --text-body-size:    16px;  --text-body-lh:    1.5;
  --text-small-size:   14px;  --text-small-lh:   1.5;
  --text-caption-size: 13px;  --text-caption-lh: 1.4;
  --text-micro-size:   11px;  --text-micro-lh:   1.3;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em; /* buttons / eyebrows */
  --tracking-caps:   0.08em; /* all-caps labels */
}

/* Convenience text classes (used by specimens + kits) */
.kstk-display { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-display-size); line-height: var(--text-display-lh); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.kstk-h1 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-h1-size); line-height: var(--text-h1-lh); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.kstk-h2 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.kstk-h3 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h3-size); line-height: var(--text-h3-lh); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.kstk-h4 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h4-size); line-height: var(--text-h4-lh); color: var(--text-strong); }
.kstk-title { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-title-size); line-height: var(--text-title-lh); color: var(--text-strong); }
.kstk-body { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--text-body); }
.kstk-small { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--text-body); }
.kstk-caption { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--text-muted); }
.kstk-eyebrow { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-small-size); line-height: 1.2; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-link); }