/* The Standard Deviation — design tokens.
   The one source of truth for colour, type, layout, rules, motion and engraving across the
   landing page and the app. Link it before every other stylesheet:
     <link rel="stylesheet" href="./tokens.css">
   Meaning and usage: docs/DESIGN-SYSTEM.md. Brand rules: docs/BRAND.md. */
:root{
  color-scheme:light;

  /* Colour. Warm paper, one ink, one copper, one plum. Nothing else. */
  --paper:#f5f2eb;            /* the page; warm, never white */
  --paper-deep:#ede7dc;       /* filled fields, inputs, quiet strips */
  --ink:#292723;              /* text, buttons, the dark chapter's surface */
  --muted:#665f59;            /* secondary text */
  --rule:#cfc6bd;             /* hairline dividers */
  --rule-strong:var(--ink);   /* the footer's top rule */
  --copper:#a55d43;           /* emphasis, actions, the second line of a headline */
  --plum:#645164;             /* secondary data lines, the plum tint in engraving */
  --purple:var(--plum);       /* legacy alias for older stylesheets; use --plum */
  --selection:#e0d4d9;

  /* On the ink surface: the dark chapter, the app sidebar, buttons, toasts. */
  --on-ink:#f5f2eb;
  --on-ink-muted:#c5bfb6;
  --on-ink-quiet:#bfb8ab;
  --on-ink-rule:#5b5650;
  --on-ink-copper:#cfab92;

  /* Engraving: SVG line art, graphics and the background. */
  --engraving-ink:#5e5650;    /* a shade lighter than text ink, so hairlines stay hairlines */
  --engraving-plum:#645164;
  --engraving-copper:#a55d43;
  --engraving-paper:#f5f2eb;  /* lines on the ink surface */
  --hairline:.55px;
  --hairline-strong:.75px;
  --hatch-angle:30deg;
  --hatch-gap:2.2px;

  /* Type. Self-hosted: fonts.css. */
  --display:'Newsreader',Georgia,serif;
  --body:'Commissioner',Arial,sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --display-1:clamp(50px,5.5vw,74px);   /* one statement per page */
  --display-2:clamp(42px,4.5vw,60px);   /* section headings */
  --display-3:48px;                     /* sheet and panel headings */
  --display-4:28px;                     /* lead copy */
  --display-leading:1.04;
  --display-track:-.028em;
  --text:16px;
  --text-prose:15px;
  --text-small:13px;
  --text-fine:12px;
  --text-micro:11px;
  --leading:1.6;
  --leading-prose:1.85;
  --overline-track:.04em;

  /* Layout. */
  --page-max:1200px;
  --header-max:1120px;
  --gutter:40px;
  --column-gap:48px;
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:88px; --space-10:112px;
  --radius:0;                 /* nothing is rounded except the medal and its coin edge */

  /* Motion. Slow, mechanical, never a payout. */
  --ease-reveal:cubic-bezier(.2,.65,.25,1);
  --ease-settle:cubic-bezier(.2,.7,.2,1);
  --t-hover:.25s;
  --t-reveal:.8s;
  --t-enter:.9s;              /* graphic entrances: medal, profit; dividend .8s */
  --t-explainer:2.8s;         /* the section-01 drawing */
  --cycle-swing:14s;          /* the coin rocking */
  --cycle-ripple:9s;
  --cycle-float:18s;

  /* Focus. */
  --focus:2px solid var(--copper);
  --focus-offset:5px;
}
@media(max-width:760px){:root{--gutter:24px}}
@media(max-width:380px){:root{--gutter:20px}}