/* Tokens. The only file in which raw colour, size, and duration values appear.
   See design/design-system.md. Everything else uses var(). */
:root{
  /* colour — the whole palette. Nothing outside this list. */
  --paper:#ffffff;
  --surface:#f5f6f8;
  --sel:#eef1f4;
  --ink:#0f0f0f;
  --ink-2:#4c4c4a;
  --ink-3:#8d8d89;
  --line:#e4e6ea;
  --line-2:#cfd3da;
  --hi:#20303f;
  --hi-on:#ffffff;
  --ok:#2f6b4f; --ok-soft:#eaf1ed;
  --wn:#7d5f1c; --wn-soft:#f5efe1;

  /* type */
  --font:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --t-display:76px; --lh-display:1.0; --tr-display:-0.015em;
  --t-title:52px;   --lh-title:1.05;  --tr-title:-0.01em;
  --t-heading:32px; --lh-heading:1.15;--tr-heading:-0.005em;
  --t-lede:21px;    --lh-lede:1.35;   --tr-lede:-0.01em;
  --t-body:17px;    --lh-body:1.55;
  --t-small:14px;   --lh-small:1.5;
  --t-micro:12px;   --lh-micro:1.4;
  --w-regular:400; --w-label:500; --w-bold:600;
  --measure:60ch;

  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;

  /* layout */
  --container:1120px;
  --container-wide:1240px;
  --gutter:64px;
  --header-h:64px;
  --r-1:6px; --r-2:12px; --r-3:20px;
  --hair:1px; --ring:2px; --ring-offset:3px;

  /* motion */
  --d-fast:120ms; --d-move:240ms; --d-settle:600ms; --d-stagger:100ms;
  --e-out:cubic-bezier(0.2,0.7,0.2,1);
  --e-inout:cubic-bezier(0.4,0,0.2,1);

  /* hero band */
}
@media (max-width:1279px){
  :root{ --gutter:48px; }
}
@media (max-width:767px){
  :root{
    --gutter:24px;
    --t-display:46px; --t-title:38px; --t-heading:28px; --t-lede:19px;
    --hero-vh:36vh;
  }
}