/* ═══════════════════════════════════════════════════════════════════════════
   @evident-technologies/design-tokens — typography-scale.css
   Institutional Typography Scale — additive tokens layer.

   Status: ADDITIVE — does not modify or replace any existing token.
   Adoption: OPT-IN — consumers explicitly import this file to use these tokens.

   Doctrine summary:
     Typography is editorial, procedural, and institutionally calm.
     The scale is fluid (clamp-based) but constrained.
     Body text targets 1rem with 1.6 line-height. Measure is bounded.
     Headings use balanced wrapping; body text uses pretty wrapping.

   Reference stack (Evident ICU canonical):
     Display : Playfair Display  — Baskerville-lineage, court-letterhead gravitas
     Body    : Lora              — Calligraphic serif, law-review readability
     Chrome  : Inter             — Neutral sans for UI labels, nav, buttons
     Mono    : Courier Prime     — Court-document / transcript authority

   See: docs/TYPOGRAPHY-SCALE.md
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Fluid type scale ──────────────────────────────────────────────────
     clamp(minimum, viewport-relative-fluid, maximum)
     Min targets 360px viewport; max targets 1280px+. */

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12 → 13 px */
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem); /* 14 → 15 px */
  --text-base: 1rem; /* 16 px      */
  --text-md: clamp(1.0625rem, 1.03rem + 0.25vw, 1.125rem); /* 17 → 18 px */
  --text-lg: clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem); /* 18 → 20 px */
  --text-xl: clamp(1.25rem, 1.18rem + 0.5vw, 1.5rem); /* 20 → 24 px */
  --text-2xl: clamp(1.5rem, 1.4rem + 0.7vw, 1.875rem); /* 24 → 30 px */
  --text-3xl: clamp(1.875rem, 1.7rem + 1.2vw, 2.5rem); /* 30 → 40 px */
  --text-4xl: clamp(2.25rem, 2rem + 1.8vw, 3.25rem); /* 36 → 52 px */
  --text-5xl: clamp(2.75rem, 2.4rem + 2.4vw, 4rem); /* 44 → 64 px */
  --text-display: clamp(3.25rem, 2.8rem + 3.2vw, 5rem); /* 52 → 80 px */

  /* ── Line-height tokens ────────────────────────────────────────────────
     Editorial defaults — denser for headings, generous for prose. */

  --leading-tight: 1.15; /* Display + hero headings. */
  --leading-snug: 1.3; /* Section headings.        */
  --leading-normal: 1.5; /* UI chrome, buttons.      */
  --leading-relaxed: 1.6; /* Body prose.              */
  --leading-prose: 1.7; /* Long-form reading.       */

  /* ── Tracking / letter-spacing ─────────────────────────────────────────
     Negative for large display (optical), positive for small caps / labels. */

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  /* ── Font weight tokens ────────────────────────────────────────────────
     Constrained set — institutional surfaces use four weights, max. */

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

  /* ── Measure (reading width) ───────────────────────────────────────────
     Optimal line length for institutional prose. */

  --measure-narrow: 45ch;
  --measure-prose: 65ch;
  --measure-wide: 75ch;
}

/* ── Headings: utility class set (opt-in) ────────────────────────────────
   Consumers may apply these directly or compose with their own selectors.
   Class-based, not element-based — does not override h1..h6 globally. */

.text-display {
  /* Playfair Display named explicitly — --font-serif resolves to Merriweather in
     tokens.css, which diverges from the doctrine canonical display face.
     This class is authoritative; consumers must load the Playfair Display
     @font-face (already present in evident-icu/src/assets/css/fonts.css). */
  font-family: "Playfair Display", var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.text-heading-1 {
  font-family: "Playfair Display", var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.text-heading-2 {
  font-family: "Playfair Display", var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.text-heading-3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.text-body {
  /* Lora named explicitly for the same reason as .text-display above. */
  font-family: Lora, var(--font-serif);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
  max-inline-size: var(--measure-prose);
}

.text-prose {
  font-family: Lora, var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-prose);
  text-wrap: pretty;
  max-inline-size: var(--measure-prose);
}

.text-ui {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
}

.text-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.text-mono {
  /* Courier Prime named explicitly per doctrine (--font-mono = JetBrains Mono
     in tokens.css; Courier Prime carries court-document authority). */
  font-family: "Courier Prime", var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}