/* generated by tokens.py - do not edit by hand */
:root{
  --paper:#F8F4F0;
  --paper-2:#FFFFFF;
  --paper-3:#EDE7E1;
  --teal:#2A1726;
  --teal-2:#351E31;
  --teal-3:#42273D;
  --on-paper:#1F1620;
  --on-paper-m:#5C5259;
  --on-teal:#F5F1F3;
  --on-teal-m:#C0AEBB;
  --line-p:#E3DBD4;
  --line-p2:#CDC1B8;
  --line-t:#43293D;
  --line-t2:#5A3B52;
  --brand-p:#98491B;
  --brand-t:#F3A87A;
  --brand-f:#8E4319;
  --wash-p:#F4E6DC;
  --wash-t:#3A1F22;
  --over-p:#A33322;
  --over-t:#FF9C8C;
  --overw-p:#FBE8E3;
  --overw-t:#331B15;
  --ok-p:#2F6B3C;
  --ok-t:#8BD3A4;
  --okw-p:#E5F1E9;
  --okw-t:#13291C;

  /* type: one grotesque family for display and body. The display is set
     very large and very tight; the body at normal tracking. Numbers in a
     monospace face so that a figure in a table lines up with the figure
     under it. All three are system stacks; nothing is fetched. */
  --font-d:'Inter var','Inter',ui-sans-serif,system-ui,-apple-system,
           'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-ui:'Inter var','Inter',ui-sans-serif,system-ui,-apple-system,
           'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-num:ui-monospace,'SFMono-Regular','SF Mono','Cascadia Mono',
           'Roboto Mono',Menlo,Consolas,monospace;

  --wide:1220px; --mid:980px; --text:66ch;
  --gut:clamp(16px,4vw,32px);
  --r:10px;          /* a small, even radius everywhere: not square, not soft */
  --r-sm:6px;
  --pill:999px;

  /* the motion budget, UI_STANDARD section 12.3 */
  --t-in:380ms; --t-child:280ms; --t-hover:150ms; --t-count:680ms;
  --stagger:50ms; --rise:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow:0 1px 2px rgba(42,23,38,.05),0 10px 26px -13px rgba(42,23,38,.2);
  --shadow-t:0 1px 2px rgba(0,0,0,.4),0 14px 34px -14px rgba(0,0,0,.6);

  /* default ground: GREY-WHITE PAPER */
  --ground:#F8F4F0;
  --card:#FFFFFF;
  --card-2:#EDE7E1;
  --fg:#1F1620;
  --fg-m:#5C5259;
  --rule:#E3DBD4;
  --rule-2:#CDC1B8;
  --brand:#98491B;
  --brand-f:#8E4319;
  --wash:#F4E6DC;
  --over:#A33322;
  --over-w:#FBE8E3;
  --ok:#2F6B3C;
  --ok-w:#E5F1E9;
  --shadow-now:var(--shadow);
}

/* Inverted ground. Redeclaring the same names is the whole trick.
   Every component below keeps using --fg, --rule, --card and does
   not know it has been moved onto teal. */
.sec--ink{
  --ground:#2A1726;
  --card:#351E31;
  --card-2:#42273D;
  --fg:#F5F1F3;
  --fg-m:#C0AEBB;
  --rule:#43293D;
  --rule-2:#5A3B52;
  --brand:#F3A87A;
  --brand-f:#8E4319;
  --wash:#3A1F22;
  --over:#FF9C8C;
  --over-w:#331B15;
  --ok:#8BD3A4;
  --ok-w:#13291C;
  --shadow-now:var(--shadow-t);
  background:var(--ground);color:var(--fg);
}

/* An always-paper island: a measurement panel redeclares the ground
   tokens back to paper from the raw palette, so a measurement looks
   identical wherever it is dropped. */
.isl{
  --ground:#F8F4F0;
  --card:#FFFFFF;
  --card-2:#EDE7E1;
  --fg:#1F1620;
  --fg-m:#5C5259;
  --rule:#E3DBD4;
  --rule-2:#CDC1B8;
  --brand:#98491B;
  --brand-f:#8E4319;
  --wash:#F4E6DC;
  --over:#A33322;
  --over-w:#FBE8E3;
  --ok:#2F6B3C;
  --ok-w:#E5F1E9;
  --shadow-now:var(--shadow);
  background:var(--card);color:var(--fg);
}