/* ============================================================
   VULPES TYPOGRAPHY — ZeroFox (authoritative)
   ------------------------------------------------------------
   Sizes, line-heights, letter-spacing and per-style weights are
   now EXACT, generated verbatim from the customer's typography
   token file (uploads/Mode 1.tokens.json — the "Mode 1" set of
   the type collection). Values are the real Figma variables:
   px sizes, px line-heights (kept fractional where the source is),
   and px letter-spacing.

   Families ✅ exact: Open Sans (product) + IBM Plex Mono (data).
   Material Symbols Rounded is the icon face (see fonts.css).
   ============================================================ */

:root {
  /* families */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-icon: 'Material Symbols Rounded';

  /* weight name tokens (Open Sans ships 300/400/500/600) */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ---- type scale — size / line-height (px, exact) ---- */
  --size-headline-1: 95px;   --lh-headline-1: 114px;
  --size-headline-2: 60px;   --lh-headline-2: 72px;
  --size-headline-3: 46px;   --lh-headline-3: 59.8px;
  --size-headline-4: 32px;   --lh-headline-4: 44.8px;
  --size-h1: 23px;           --lh-h1: 32.2px;
  --size-h2: 20px;           --lh-h2: 28px;
  --size-h3: 16px;           --lh-h3: 22.4px;
  --size-h4: 14px;           --lh-h4: 21px;
  --size-body-1: 16px;       --lh-body-1: 24px;
  --size-body-2: 14px;       --lh-body-2: 20px;
  --size-button: 14px;       --lh-button: 20px;
  --size-button-small: 12px; --lh-button-small: 16px;
  --size-caption: 12px;      --lh-caption: 19.2px;
  --size-overline: 12px;     --lh-overline: 19.2px;
  --size-input: 14px;        --lh-input: 20px;
  --size-mono: 12px;         --lh-mono: 18px;

  /* ---- per-style weight (exact) ---- */
  --weight-headline-1: var(--weight-light);
  --weight-headline-2: var(--weight-light);
  --weight-headline-3: var(--weight-medium);
  --weight-headline-4: var(--weight-medium);
  --weight-h1: var(--weight-medium);
  --weight-h2: var(--weight-semibold);
  --weight-h3: var(--weight-semibold);
  --weight-h4: var(--weight-semibold);
  --weight-body-1: var(--weight-regular);
  --weight-body-1-emphasis: var(--weight-semibold);
  --weight-body-2: var(--weight-regular);
  --weight-body-2-emphasis: var(--weight-semibold);
  --weight-button: var(--weight-medium);
  --weight-mono: var(--weight-medium);
  --weight-caption: var(--weight-regular);
  --weight-overline: var(--weight-regular);
  --weight-input: var(--weight-regular);

  /* ---- per-style letter-spacing (px, exact) ---- */
  --ls-headline-1: -1.5px;
  --ls-headline-2: -0.5px;
  --ls-headline-3: 0px;
  --ls-headline-4: 0.25px;
  --ls-h1: 0px;
  --ls-h2: -0.15px;
  --ls-h3: -0.15px;
  --ls-h4: -0.25px;
  --ls-body-1: -0.1px;
  --ls-body-2: -0.15px;
  --ls-button: 0.1px;
  --ls-mono: -0.15px;
  --ls-caption: 0.1px;
  --ls-overline: 0.1px;
  --ls-input: -0.15px;

  /* legacy generic aliases (kept for back-compat) */
  --letter-spacing-tight: var(--ls-h2);
  --letter-spacing-normal: 0px;
  --letter-spacing-button: var(--ls-button);
  --letter-spacing-overline: var(--ls-overline);
}

/* ---- specimen helper classes (one per named text style) ---- */
.mat-headline-1 { font: var(--weight-headline-1) var(--size-headline-1)/var(--lh-headline-1) var(--font-sans); letter-spacing: var(--ls-headline-1); margin: 0; }
.mat-headline-2 { font: var(--weight-headline-2) var(--size-headline-2)/var(--lh-headline-2) var(--font-sans); letter-spacing: var(--ls-headline-2); margin: 0; }
.mat-headline-3 { font: var(--weight-headline-3) var(--size-headline-3)/var(--lh-headline-3) var(--font-sans); letter-spacing: var(--ls-headline-3); margin: 0; }
.mat-headline-4 { font: var(--weight-headline-4) var(--size-headline-4)/var(--lh-headline-4) var(--font-sans); letter-spacing: var(--ls-headline-4); margin: 0; }
.mat-h1, .mat-headline-5 { font: var(--weight-h1) var(--size-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--ls-h1); margin: 0; }
.mat-h2, .mat-headline-6 { font: var(--weight-h2) var(--size-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); margin: 0; }
.mat-h3, .mat-subtitle-1 { font: var(--weight-h3) var(--size-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3); margin: 0; }
.mat-h4, .mat-subtitle-2 { font: var(--weight-h4) var(--size-h4)/var(--lh-h4) var(--font-sans); letter-spacing: var(--ls-h4); margin: 0; }
.mat-body-1 { font: var(--weight-body-1) var(--size-body-1)/var(--lh-body-1) var(--font-sans); letter-spacing: var(--ls-body-1); }
.mat-body-1-emphasis { font: var(--weight-body-1-emphasis) var(--size-body-1)/var(--lh-body-1) var(--font-sans); letter-spacing: var(--ls-body-1); }
.mat-body-2 { font: var(--weight-body-2) var(--size-body-2)/var(--lh-body-2) var(--font-sans); letter-spacing: var(--ls-body-2); }
.mat-body-2-emphasis { font: var(--weight-body-2-emphasis) var(--size-body-2)/var(--lh-body-2) var(--font-sans); letter-spacing: var(--ls-body-2); }
.mat-button { font: var(--weight-button) var(--size-button)/var(--lh-button) var(--font-sans); letter-spacing: var(--ls-button); }
.mat-caption { font: var(--weight-caption) var(--size-caption)/var(--lh-caption) var(--font-sans); letter-spacing: var(--ls-caption); }
.mat-overline { font: var(--weight-overline) var(--size-overline)/var(--lh-overline) var(--font-sans); letter-spacing: var(--ls-overline); text-transform: uppercase; }
.mat-input { font: var(--weight-input) var(--size-input)/var(--lh-input) var(--font-sans); letter-spacing: var(--ls-input); }
.mat-monospaced, code, pre { font: var(--weight-mono) var(--size-mono)/var(--lh-mono) var(--font-mono); letter-spacing: var(--ls-mono); }