/* ============================================================
   Bettermode — Typography tokens
   Source: Visual Identity Standards v2.0, §2.0–2.5
   Brand font: TT Interphases Pro + TT Interphases Pro Mono.
   SUBSTITUTED with Inter (the brand's own sanctioned system
   alternate) + Roboto Mono — see fonts.css.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ---- Type scale (px; brand designs in pt ~ 1:1 for digital) ---- */
  --fs-eyebrow:   13px;
  --fs-caption:   14px;
  --fs-body-sm:   16px;
  --fs-body:      18px;  /* Body — Regular */
  --fs-subhead:   24px;  /* Subhead — Medium */
  --fs-h3:        32px;
  --fs-h2:        40px;
  --fs-headline:  56px;  /* Headline — Bold */
  --fs-display:   72px;
  --fs-display-lg: 96px;

  /* ---- Line heights (from brand specs) ---- */
  --lh-eyebrow:  1.25;   /* @kind font */
  --lh-headline: 1.20;   /* @kind font */
  --lh-subhead:  1.35;   /* @kind font */
  --lh-body:     1.50;   /* @kind font */
  --lh-tight:    1.10;   /* @kind font */

  /* ---- Letter spacing (from brand specs) ---- */
  --ls-eyebrow:  0.09em;  /* 9% CAPS */
  --ls-headline: 0em;
  --ls-subhead:  -0.01em; /* -1% */
  --ls-body:     0.01em;  /* 1% */
  --ls-display:  -0.02em;
}

/* ============================================================
   Type role classes — the structural system (eyebrow → body)
   ============================================================ */
.bm-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.bm-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
  text-wrap: balance;
}
.bm-headline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  color: var(--text-primary);
  text-wrap: balance;
}
.bm-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-headline);
  color: var(--text-primary);
  text-wrap: balance;
}
.bm-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-headline);
  color: var(--text-primary);
}
.bm-subhead {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
  color: var(--text-primary);
  text-wrap: pretty;
}
.bm-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  text-wrap: pretty;
}
.bm-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.bm-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
}

/* ============================================================
   Highlight — the "better" marker.
   Brand book §2.2: a horizontal swash at 50% of letter height,
   sitting 25% below the baseline, behind the word.

   PAIRING LAW (guidelines/design-rules.md §1 & §3):
   The swash is ALWAYS half-height — 50% of letter height, sitting
   ~25% below the baseline, BEHIND the text — never a solid block.
   Only the tone changes with the surface:
   · Light surfaces: Spark default (.bm-highlight), Bloom alternate,
     behind Signal text.
   · Dark surfaces (Signal/Reach/photos): Bloom only
     (.bm-highlight--bloom) behind white text. NEVER a green/Spark
     swash or green text on dark.
   · Lime never touches the violet family (no Spark on Reach or
     on Bloom surfaces).
   · One highlighted phrase per screen/slide, max.
   ============================================================ */
.bm-highlight {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.bm-highlight::before {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: -0.06em;      /* ~25% below baseline */
  height: 0.5em;        /* 50% of letter height */
  background: var(--highlight-spark);
  z-index: -1;
  border-radius: 0.04em;
}
.bm-highlight--bloom::before  { background: var(--highlight-bloom); }
/* legacy variants — light surfaces only, use when Spark/Bloom can't work */
.bm-highlight--green::before  { background: var(--highlight-green); }
.bm-highlight--violet::before { background: var(--highlight-violet); }

/* On dark surfaces use .bm-highlight--bloom behind white text — the same
   half-height geometry; only the tone changes. No solid-marker variant. */