/* Keelvy — Typography tokens
   ------------------------------------------------------------------ */

:root {
  /* ── Font stacks ─────────────────────────────────────────────────── */
  --sans:    'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* @kind font */
  --mono:    'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; /* @kind font */
  /* Literata Bold Italic 700 at --text-display-heading (28px) — the ONE
     editorial size, matching `.display-heading` in the app. Nothing smaller:
     Literata slants 2°, Geist Italic slants 12°, and at 20px in a card
     header that difference reads as a build error, not a voice. */
  --display: 'Literata', 'Fraunces', Georgia, serif; /* @kind font */

  /* Legacy aliases */
  --font-sans:      var(--sans);
  --font-mono:      var(--mono);
  --font-editorial: var(--display);
  --font-heading:   var(--sans);

  /* ── App scale — built for density ──────────────────────────────── */
  --text-eyebrow: 10px;   /* mono, UPPERCASE, 0.14–0.16em tracking */
  --text-xs:      11px;
  --text-sm:      12.5px; /* labels, captions, badges, key labels */
  --text-base:    13.5px; /* app body copy */
  --text-md:      15px;   /* card / section title — Geist SemiBold UPRIGHT */
  --text-lg:      20px;   /* sub-heads — Geist */
  --text-xl:      22px;
  --text-2xl:     34px;   /* large numbers, marketing blocks — Geist */
  --text-3xl:     44px;   /* marketing only — never an app page title */

  /* ── The editorial heading ──────────────────────────────────────────
     Page titles, settings-panel heads and section intros. Literata Bold
     Italic 700 at 28px — one size, one weight, matching `.display-heading`
     in the app. 44px was tried and is too much for a dense product. */
  --text-display-heading: 28px;
  --display-weight:       700;

  /* Upright UI titles. A card or section title is Geist SemiBold at
     --text-md; Literata left that size in v2. */
  --ui-title-weight: 600;

  /* ── Marketing scale — web pages only, never in app chrome ───────
     The app scale stops at 44px and is built for density; a landing page
     set on it reads like an order table. Separate block so the two
     never mix. */
  --text-hero:        clamp(40px, 7vw, 76px);  /* Literata Bold Italic */
  --text-display:     clamp(28px, 4vw, 46px);  /* Literata Bold Italic */
  --text-lead:        18.5px;
  --leading-lead:     1.55;
  --text-body-web:    16.5px;
  --leading-body-web: 1.6;
  /* The one marketing exception the brand allows: a decorative eyebrow that
     may run larger and looser than the app's 10px/0.15em micro-label. */
  --text-eyebrow-web:     11.5px;
  --tracking-eyebrow-web: 0.10em;

  /* ── Line heights ──────────────────────────────────────────────── */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── Letter spacing ─────────────────────────────────────────────── */
  --tracking-eyebrow: 0.15em;  /* mono micro-labels, UPPERCASE */
  --tracking-title:  -0.015em; /* page / section titles */
  --tracking-normal:  0em;

  /* ── Base UI type, driven by the Contrast axis ──────────────────── */
  --ui-weight: 400;
  --ui-size:   16px;
}