/* AI SCOUTS TYPE SYSTEM (16 Oct 2026)
   One file, read by the landing page and by the type guide (ai-scouts-type.html). Change a role here and both follow.

   Three faces, each with one job:
     serif  P22 Mackinac (Fraunces stands in)  statements: headlines, titles, prices. Never body copy, never UI.
     sans   ABC Areal                          everything you read or press: copy, buttons, nav, captions.
     mono   ABC Areal Mono                     labels and data: eyebrows, statuses, counts, references. Never sentences.

   Rules the roles encode:
     - Roles, not sizes: a page names what a piece of text is (headline, body, label), never a pixel size.
     - Bigger type sits tighter: line height falls from 1.5 (reading) to 1.06 (display); tracking goes negative on the
       serif as it grows, sits at 0 for reading text, and opens up only on small uppercase mono.
     - Weights are few: 400 for everything (serif, mono, sans text, titles and buttons). (Josh, 19 Oct) no 500 on the sans:
       a sans title stands out by size and colour, not weight.
     - On a dark ground (the grass, the sky, the glass cards) the sans and mono switch on their DRKM axis, which thins
       the strokes so light text does not bloom. Set it with .on-dark; dark text on a light chip inside resets with .on-light.
*/

@font-face{font-family:'ABC Areal';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/ABCAreal-var.woff2) format('woff2')}
@font-face{font-family:'ABC Areal Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/ABCArealMono-var.woff2) format('woff2')}

:root{
  --serif:'P22 Mackinac','Fraunces',Georgia,serif;
  --sans:'ABC Areal',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'ABC Areal Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* SERIF: statements */
  --font-display:  400 clamp(34px, 2.8vw, 44px)/1.06 var(--serif);   --track-display:-0.028em;   /* the hero, once a page */
  --font-headline: 400 clamp(28px, 2.5vw, 38px)/1.12 var(--serif);   --track-headline:-0.024em;  /* one per section */
  --font-title:    400 17px/1.3 var(--serif);                         --track-title:-0.01em;      /* inside a card or a list */
  --font-figure:   400 48px/1 var(--serif);                           --track-figure:-0.03em;     /* a price */

  /* SANS: reading and pressing */
  --font-lede:     400 18px/1.5 var(--sans);   --track-lede:0;        /* the one paragraph under the hero */
  --font-body:     400 16px/1.5 var(--sans);   --track-body:0;        /* reading text */
  --font-strong:   400 16px/1.4 var(--sans);   --track-strong:0;      /* a name that must stand out (a plan): regular since 19 Oct, it stands out by colour, not weight */
  --font-small:    400 14px/1.45 var(--sans);  --track-small:0;       /* text inside cards, panels, lists */
  --font-ui:       400 15px/1 var(--sans);     --track-ui:.01em;      /* buttons, inputs: Areal's lightest, nearest Granola's (Josh, 16 Oct) */
  --font-nav:      400 14px/1 var(--sans);     --track-nav:.01em;     /* nav links; the nav's own button is ui at 14px */
  --font-caption:  400 13px/1.4 var(--sans);   --track-caption:0;     /* notes under things */

  /* MONO: labels and data */
  --font-label:    400 11px/1 var(--mono);     --track-label:.08em;   /* always uppercase */
  --font-data:     400 12px/1 var(--mono);     --track-data:.02em;    /* counts, durations, references */
  --font-stat:     400 34px/1 var(--mono);     --track-stat:-0.01em;  /* one big number in a card */

  /* measure: reading text never runs past this */
  --measure:34em;
}

/* the roles as classes, for markup that wants them directly (the guide uses these) */
.t-display {font:var(--font-display); letter-spacing:var(--track-display); text-wrap:balance}
.t-headline{font:var(--font-headline);letter-spacing:var(--track-headline);text-wrap:balance}
.t-title   {font:var(--font-title);   letter-spacing:var(--track-title)}
.t-figure  {font:var(--font-figure);  letter-spacing:var(--track-figure); font-variant-numeric:lining-nums tabular-nums}
.t-lede    {font:var(--font-lede);    letter-spacing:var(--track-lede);   text-wrap:pretty;max-width:var(--measure)}
.t-body    {font:var(--font-body);    letter-spacing:var(--track-body);   text-wrap:pretty;max-width:var(--measure)}
.t-strong  {font:var(--font-strong);  letter-spacing:var(--track-strong)}
.t-small   {font:var(--font-small);   letter-spacing:var(--track-small);  text-wrap:pretty}
.t-ui      {font:var(--font-ui);      letter-spacing:var(--track-ui)}
.t-nav     {font:var(--font-nav);     letter-spacing:var(--track-nav)}
.t-caption {font:var(--font-caption); letter-spacing:var(--track-caption)}
.t-label   {font:var(--font-label);   letter-spacing:var(--track-label);  text-transform:uppercase}
.t-data    {font:var(--font-data);    letter-spacing:var(--track-data);   font-variant-numeric:tabular-nums}
.t-stat    {font:var(--font-stat);    letter-spacing:var(--track-stat);   font-variant-numeric:tabular-nums}

.on-dark{font-variation-settings:'DRKM' 1}
.on-light{font-variation-settings:'DRKM' 0}