/* KH Design System · Typography tokens
 * The mono face is the system's voice. If a string is a FACT (an ID, a time, a count,
 * a region, a version), it is Plex Mono. If it is prose, it is Instrument Sans.
 * Display is Archivo, wide and heavy, uppercase.
 */
:root {
  /* --- Font families --- */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* modern face for brand micro-text: domain lines, small brand labels */
  --font-brand: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* --- Display treatment (the brand signature) --- */
  --display-weight: 800;
  /* wdth axis: 110-115 stretched */
  --display-wdth: 112; /* @kind other */
  --display-tracking: -0.025em;
  --display-leading: 1;
  --display-leading-hero: 0.95;    /* personal-site hero, file 01 §3.1 */

  /* --- Type scale (personal-site scale, file 01 §3.1) --- */
  --fs-hero: clamp(48px, 8vw, 96px);        /* @kind font */
  --fs-section-title: clamp(28px, 4vw, 44px); /* @kind font */
  --fs-h1: clamp(34px, 5vw, 52px);          /* @kind font */
  --fs-kpi: 28px;                            /* KPI value */
  --fs-card-title: 16.5px;                   /* 16.5-17px */
  --fs-body: 16px;                           /* personal site may run 16px */
  --fs-body-base: 15px;                      /* inherited base body */
  --fs-body-sm: 13.5px;                      /* secondary text */
  --fs-mono: 12px;                           /* mono facts */
  --fs-mono-label: 11px;                     /* uppercase labels 9.5-12px */
  --fs-mono-sm: 10px;

  /* --- Mono label treatment --- */
  --mono-tracking: 0.08em;         /* 0.07-0.1em */
  --mono-tracking-wide: 0.1em;
  --mono-weight: 500;

  /* --- Body weights --- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* --- Leading --- */
  --leading-body: 1.5;
  --leading-tight: 1.2;

  /* --- Semantic aliases --- */
  --type-display: var(--font-display);
  --type-prose: var(--font-body);
  --type-data: var(--font-mono);
}