/* ============================================================
   Lancephase — Typography tokens
   Titles/Display: Clash Display  (on-brand substitute for Tactic Sans*)
   Headlines:      Clash Display  (brand "Clash Medium" headline face)
   Body / copy:    Helvetica Now  (variable)
   *Tactic Sans-Bld was specified for titles but NOT supplied — Clash Display,
    the brand's own headline face, stands in. See readme.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: "Clash Display", "Tactic Sans", "Helvetica Now", system-ui, sans-serif;
  --font-heading: "Clash Display", "Helvetica Now", system-ui, sans-serif;
  --font-body:    "Helvetica Now", "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-extralight: 200; /* @kind font */
  --fw-light:      300; /* @kind font */
  --fw-regular:    400; /* @kind font */
  --fw-medium:     500; /* @kind font */
  --fw-semibold:   600; /* @kind font */
  --fw-bold:       700; /* @kind font */

  /* ---- Type scale (display-forward, 1.25 ratio at the top) ---- */
  --fs-display-2xl: 88px;
  --fs-display-xl:  68px;
  --fs-display-lg:  52px;
  --fs-h1:          40px;
  --fs-h2:          32px;
  --fs-h3:          25px;
  --fs-h4:          20px;
  --fs-lg:          18px;
  --fs-body:        16px;
  --fs-sm:          14px;
  --fs-xs:          12.5px;
  --fs-overline:    12px;

  /* ---- Line heights ---- */
  --lh-tight:   1.02; /* @kind font */
  --lh-snug:    1.12; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em; /* @kind font */
  --ls-heading: -0.01em; /* @kind font */
  --ls-body:     0em; /* @kind font */
  --ls-overline: 0.18em; /* @kind font */
  --ls-wide:     0.04em; /* @kind font */
}

/* ---- Optional helper classes (components may use tokens directly) ---- */
.lp-display { font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--text-strong); }
.lp-h1 { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.lp-h2 { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.lp-h3 { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.lp-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); }
.lp-overline { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-muted); }