/* ============================================================
   SWORN — Typography Tokens
   Families:
     Serif  (Newsreader)     — display & editorial statements
     Sans   (Hanken Grotesk) — UI, body, the workhorse
     Mono   (IBM Plex Mono)  — hashes, IDs, labels, protocol values
   Authority through clarity, not decoration.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", monospace;

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

  /* ---- Type scale (rem @ 16px root) — measured, not rounded --- */
  --text-display:  4.5rem;   /* 72px — hero statements            */
  --text-h1:       3rem;     /* 48px                              */
  --text-h2:       2.25rem;  /* 36px                              */
  --text-h3:       1.75rem;  /* 28px                              */
  --text-h4:       1.375rem; /* 22px                              */
  --text-h5:       1.125rem; /* 18px                              */
  --text-h6:       1rem;     /* 16px                              */
  --text-body-lg:  1.125rem; /* 18px                              */
  --text-body:     1rem;     /* 16px                              */
  --text-sm:       0.875rem; /* 14px                              */
  --text-caption:  0.8125rem;/* 13px                              */
  --text-label:    0.75rem;  /* 12px — uppercase eyebrows/labels  */
  --text-micro:    0.6875rem;/* 11px — dense mono tags            */

  /* ---- Line heights ---- */
  --leading-tight:   1.08;   /* display                           */
  --leading-snug:    1.2;    /* headings                          */
  --leading-normal:  1.5;    /* body                              */
  --leading-relaxed: 1.65;   /* long-form body                    */
  --leading-mono:    1.45;   /* code / protocol values            */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em; /* display serif                   */
  --tracking-tight:   -0.015em;/* headings                        */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-label:   0.09em;  /* uppercase labels / eyebrows     */
  --tracking-mono:    -0.01em; /* mono tightening                 */
}

/* ============================================================
   Optional utility classes — the type ramp as ready-made roles.
   Components may use these or the tokens directly.
   ============================================================ */

.t-display {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-primary);
}
.t-h1 { font-family: var(--font-serif); font-weight: var(--weight-regular); font-size: var(--text-h1); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.t-h2 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.t-h4 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h4); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); color: var(--text-primary); }
.t-h5 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h5); line-height: var(--leading-normal); color: var(--text-primary); }
.t-h6 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h6); line-height: var(--leading-normal); color: var(--text-primary); }

.t-body-lg { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.t-body    { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--leading-normal); color: var(--text-secondary); }
.t-sm      { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.t-caption { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-caption); line-height: var(--leading-normal); color: var(--text-muted); }

.t-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-label);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--text-primary);
}
.t-mono-sm { font-family: var(--font-mono); font-size: var(--text-caption); line-height: var(--leading-mono); letter-spacing: var(--tracking-mono); }

/* Serif emphasis for pull-statements */
.t-statement {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  font-style: italic;
  color: var(--text-primary);
}

/* ---- Responsive scaling ---- */
@media (max-width: 768px) {
  :root {
    --text-display: 2.75rem;  /* 44px */
    --text-h1:      2.25rem;  /* 36px */
    --text-h2:      1.75rem;  /* 28px */
    --text-h3:      1.375rem; /* 22px */
    --text-h4:      1.1875rem;/* 19px */
  }
}