/* LivOn — Typography scale
   Source: Figma "Branding › App Typography", REBASED 2026-08-31 from an
   18px body base to a 16px body base.

   The rebase preserves the original scale exactly: same eight steps, same
   ratio of each step to the body base. Every size is (old size ÷ 18) × 16,
   rounded to the nearest even pixel.

   Single typeface: Inter. Line-height stays 1.5× the font size.

   Legibility floor: the 16px minimum is a **body-type** rule and body holds it
   exactly. Caption (14px) and Footnote (12px) sit below it by design — reviewed
   and accepted 2026-08-31. Don't set body copy in Caption or Footnote to save
   space; that is what the floor exists to prevent.

   Naming: the --fs- and --lh- families are the sizing primitives (what
   components consume); the --type- family are the semantic role names,
   matching the role-based colour convention. */

:root {
  /* Font sizes — rebased to a 16px body */
  --fs-h1: 42px;          /* was 48 */
  --fs-h2: 22px;          /* was 24 */
  --fs-h3: 20px;          /* was 22 */
  --fs-h4: 18px;          /* was 20 */
  --fs-body-lg: 18px;     /* was 20 */
  --fs-body: 16px;        /* was 18 — the new base */
  --fs-body-sm: 14px;     /* was 16 */
  --fs-footnote: 12px;    /* was 14 */

  /* Line heights (1.5×) */
  --lh-h1: 63px;
  --lh-h2: 33px;
  --lh-h3: 30px;
  --lh-h4: 27px;
  --lh-body-lg: 27px;
  --lh-body: 24px;
  --lh-body-sm: 21px;
  --lh-footnote: 18px;

  /* Semantic role names — use these when writing new UI */
  --type-display: var(--fs-h1);       /* Hero / onboarding prompt */
  --type-title: var(--fs-h2);         /* Screen title */
  --type-heading: var(--fs-h3);       /* Section heading */
  --type-subheading: var(--fs-h4);    /* Card title, list-row label */
  --type-emphasized-body-lead: var(--fs-body-lg);/* Emphasised body / lead paragraph */
  --type-default-body: var(--fs-body);        /* Default paragraph + primary button — body text for the entire app */
  --type-caption: var(--fs-body-sm);  /* Helper text, chip label, secondary body */
  --type-footnote: var(--fs-footnote);/* Metadata, provenance label, badge */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 900; /* @kind font */
}

/* Optional helper classes — apply the full token in one shot.
   (Tokens above remain the primary API.) */
.livon-h1 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text-primary); letter-spacing: -0.02em; }
.livon-h2 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-primary); }
.livon-h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-primary); }
.livon-h4 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--text-primary); }
.livon-body-lg { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-secondary); }
.livon-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
.livon-body-sm { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-tertiary); }
.livon-footnote { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--text-tertiary); }