/* ============================================================
   kinship mfg — Typography tokens
   ------------------------------------------------------------
   Two typefaces, two jobs:
     · SATOSHI    (anchor)    — geometric-humanist sans. Display,
                                headlines, all UI, labels, buttons.
                                Tight, confident, modern-craft.
     · NEWSREADER (companion) — optical serif. The reading voice:
                                body prose, pull quotes, the
                                founder's story. Warm, literary.
     · BEA        (logotype)  — hand-drawn; the wordmark ONLY.

   The system is built in three layers (see the Type cards):
     1. FAMILIES — two fonts, two jobs (below).
     2. ROLES    — named styles (.km-display-xl … .km-button),
                   each bundling font + weight + size + line-height
                   + tracking. Defined as classes in base.css; the
                   size/leading/tracking tokens they consume live here.
     3. SCALE    — the raw size tokens roles are built from.

   Body/UI scale is a clean even ramp — 12 · 14 · 16 · 18 · 20 · 22.
   Display & headings scale fluidly (clamp, mobile → desktop);
   body/UI sizes are fixed. Line-height rides the 4px half-step.
   ============================================================ */

:root {
  /* ============ 1. FAMILIES ============ */
  --font-sans:  "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-logo:  "BEA", "Satoshi", ui-sans-serif, system-ui, sans-serif;

  /* Semantic family aliases — reach for these */
  --font-display:   var(--font-sans);   /* ANCHOR: display + headlines */
  --font-ui:        var(--font-sans);   /* ANCHOR: buttons, labels, dense UI */
  --font-reading:   var(--font-serif);  /* COMPANION: long-form reading */
  --font-editorial: var(--font-serif);  /* COMPANION: quotes, founder voice */
  --font-body:      var(--font-serif);  /* default body = companion serif */
  --font-mark:      var(--font-logo);   /* LOGOTYPE: wordmark only */

  /* ============ WEIGHTS ============ */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  /* ============ 3. SCALE ============ */
  /* Fixed text sizes (rem, 16px base) — body/UI never scale.
     Even 2px ramp: 12 · 14 · 16 · 18 · 20 · 22. Floor is 12px. */
  --text-2xs:  0.75rem;   /* 12px — chips / captions / provenance */
  --text-xs:   0.875rem;  /* 14px — eyebrows / annotation / fine print */
  --text-sm:   1rem;      /* 16px — UI / nav / buttons / body-sm */
  --text-base: 1.125rem;  /* 18px — body (serif reading base) */
  --text-lg:   1.25rem;   /* 20px — lead paragraphs */
  --text-xl:   1.375rem;  /* 22px — largest fixed step */

  /* Fixed display sizes — fallbacks / component use where fluid isn't wanted */
  --text-display-md:  2.25rem;  /* 36px */
  --text-display-lg:  3rem;     /* 48px */
  --text-display-xl:  4rem;     /* 64px */
  --text-display-2xl: 5.5rem;   /* 88px — hero */

  /* Heading raw sizes (used by base element h1–h4) */
  --text-h1: 1.75rem;   /* 28px */
  --text-h2: 1.5rem;    /* 24px */
  --text-h3: 1.25rem;   /* 20px */
  --text-h4: 1.0625rem; /* 17px */

  /* ---- Fluid ROLE sizes: clamp(min, preferred, max) ----
     Display/headings scale from mobile → desktop. Ranges noted. */
  --display-2xl: clamp(3rem, 1.9rem + 4.9vw, 5.5rem); /* @kind other */      /* 48 → 88 */
  --display-xl:  clamp(2.5rem, 1.85rem + 2.9vw, 4rem); /* @kind other */     /* 40 → 64 */
  --display-lg:  clamp(2rem, 1.57rem + 1.9vw, 3rem); /* @kind other */       /* 32 → 48 */
  --display-md:  clamp(1.625rem, 1.36rem + 1.2vw, 2.25rem); /* @kind other */ /* 26 → 36 */
  --heading:     clamp(1.5rem, 1.28rem + 0.98vw, 2rem); /* @kind other */    /* 24 → 32 */
  --subheading:  clamp(1.25rem, 1.14rem + 0.49vw, 1.5rem); /* @kind other */ /* 20 → 24 */

  /* ============ LINE HEIGHTS ============ */
  --leading-display:  1.02;  /* big display — nearly solid */
  --leading-tight:    1.05;
  --leading-heading:  1.15;
  --leading-snug:     1.2;
  --leading-subheading: 1.25;
  --leading-normal:   1.5;
  --leading-body:     1.6;   /* long-form reading (serif) */
  --leading-relaxed:  1.65;

  /* ============ LETTER SPACING ============
     Satoshi tightens as it grows (display negative), opens up for
     uppercase micro-labels. Newsreader body sits at 0. */
  --tracking-tighter: -0.03em;  /* big display */
  --tracking-tight:   -0.015em; /* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-button:  0.06em;   /* uppercase button labels */
  --tracking-eyebrow: 0.18em;   /* uppercase eyebrows / labels */
}