/* Sent in Stone — type tokens v1 (Onest + Recursive)
   Load after tokens.css. Both families are SIL OFL 1.1 and self-hosted.
   Font files (variable WOFF2, Latin subset) go in /fonts/:
     Onest-Variable.woff2      wght 100–900   (Fontsource: @fontsource-variable/onest)
     Recursive-Variable.woff2  wght 300–1000, MONO 0–1, CASL 0–1, slnt, CRSV
                               (Fontsource: @fontsource-variable/recursive, "full" axes file)
   Include each family's OFL.txt alongside the files. */

@font-face {
  font-family: 'Onest';
  src: url('/fonts/Onest-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Recursive';
  src: url('/fonts/Recursive-Variable.woff2') format('woff2');
  font-weight: 300 1000;
  font-style: oblique 0deg 15deg;
  font-display: swap;
}

:root {
  /* Families */
  --font-sans: 'Onest', ui-sans-serif, system-ui, sans-serif;      /* Headings, body, UI */
  --font-mono: 'Recursive', ui-monospace, Menlo, monospace;        /* Labels, DNS records, code, tagline */

  /* Recursive axis settings: always set one of these with --font-mono */
  --mono-axes: 'MONO' 1, 'CASL' 0;            /* True monospace: labels, records, code */
  --mono-axes-tagline: 'MONO' 0.5, 'CASL' 0;  /* Half-mono: tagline / brand lines only */

  /* Weights */
  --weight-regular: 400;   /* Body, mono */
  --weight-medium: 500;    /* Mono emphasis, nav */
  --weight-semibold: 600;  /* Headings, buttons */

  /* Scale: size / line-height. Display and h1 are fluid from 360px to 1280px viewports */
  --text-display: clamp(2.5rem, 1.95rem + 2.4vw, 3.5rem);  /* 40 → 56px · hero headline */
  --leading-display: 1.06;
  --text-h1: clamp(2rem, 1.73rem + 1.2vw, 2.5rem);         /* 32 → 40px · page title */
  --leading-h1: 1.12;
  --text-h2: 1.75rem;      /* 28px · section heading */
  --leading-h2: 1.2;
  --text-h3: 1.375rem;     /* 22px · card / sub-section heading */
  --leading-h3: 1.3;
  --text-body-lg: 1.125rem;/* 18px · intro paragraphs */
  --leading-body-lg: 1.6;
  --text-body: 1rem;       /* 16px · default body, buttons 15px allowed */
  --leading-body: 1.6;
  --text-small: 0.875rem;  /* 14px · captions, helper text, footer */
  --leading-small: 1.5;
  --text-label: 0.75rem;   /* 12px · mono labels, chips, eyebrows (uppercase) */
  --leading-label: 1.4;
  --text-code: 0.8125rem;  /* 13px · mono DNS records, code blocks */
  --leading-code: 1.7;

  /* Tracking */
  --tracking-tight: -0.02em;  /* Display, h1, h2 */
  --tracking-label: 0.06em;   /* Uppercase mono labels */
}

/* Base: the page sets defaults; components override with the tokens above */
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: var(--weight-semibold); text-wrap: balance; }
code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-variation-settings: var(--mono-axes);
  font-size: var(--text-code);
  line-height: var(--leading-code);
}