/* =====================================================================
   TMC Partner Letter Library — TOKENS
   Single source of truth. Runtime-agnostic (HubSpot or Cloudflare Pages).
   See ../DESIGN-SYSTEM.md. Direction locked 2026-06-19.
   Scoped to .tmc-letter so dropping this onto any host leaks no globals.
   ===================================================================== */

.tmc-letter{
  /* ---- color roles ---- */
  --bg:#f7f4ed;            /* cream page background — the literary signature */
  --bg-alt:#fffdf8;        /* raised surfaces (cards), if any */
  --ink:#1c1b18;           /* body text — warm near-black, not pure #000 */
  --ink-muted:#6b665d;     /* meta, captions, bylines, secondary prose */
  --accent:#8b1f24;        /* maroon — PRIMARY: headings, links, drop cap, rules */
  --accent-stroke:#4a1014; /* maroon darker — button hover */
  --accent-2:#FF6700;      /* orange — RESTRICTED: pull-quote rule + link hover + wordmark "o" */
  --rule:#e3ddd0;          /* hairline dividers, index separators */

  /* ---- backwards-compat aliases (legacy class names) ---- */
  --muted:var(--ink-muted);
  --faint:var(--ink-muted);
  --line:var(--rule);
  --maroon:var(--accent);
  --orange:var(--accent-2);

  /* ---- type families ---- */
  --serif:'Newsreader','Iowan Old Style',Charter,Georgia,'Times New Roman',serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;

  /* ---- type scale (~1.20 minor third) ---- */
  --t-display:clamp(34px,5vw,46px);   /* letter title only — Newsreader / 1.1 */
  --t-h2:30px;                        /* section heads — Newsreader / 1.2 */
  --t-h3:22px;                        /* sub-heads — Newsreader / 1.25 */
  --t-lead:21px;                      /* opening paragraph — Newsreader / 1.55 */
  --t-body:19px;                      /* workhorse — Newsreader / 1.6 */
  --t-pull:24px;                      /* pull quote — Newsreader italic / 1.4 */
  --t-meta:14px;                      /* dates, bylines, nav, kickers — Inter / 1.4 */

  /* ---- spacing scale (8px base) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px;

  /* ---- layout ---- */
  --measure:680px;        /* body reading column */
  --measure-wide:920px;   /* flagship hero / full-bleed viz only */
  --pad-x:26px;           /* column side padding */

  /* ---- motion (default none; flagship-only overrides) ---- */
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur:480ms;
}