/* Every colour, type and spacing value for the page lives here. No font file is loaded: type is the phone's own system font. */
:root{
  /* colour: navy, cobalt, sunflower and white, with two pale tints of the blue */
  --c-ground:#ffffff;
  --c-surface:#f1f4ff;
  --c-tint:#dfe5ff;
  --c-ink:#0b1745;
  --c-ink-soft:#45517f;
  --c-sun:#ffc928;
  --c-cobalt:#1f3fd1;
  --c-white:#ffffff;
  --c-off-ink:var(--c-ink-soft);
  --c-grab:#5b6aa8;
  --c-scrim:rgba(11,23,69,.55);
  /* colour roles */
  --c-line:var(--c-ink);
  --c-hero-bg:var(--c-cobalt);
  --c-tile:var(--c-ground);
  --c-tile-sel:var(--c-sun);
  --c-seg:var(--c-tint);
  --c-seg-on:var(--c-ink);
  --c-seg-on-ink:var(--c-white);
  --c-panel:var(--c-surface);
  --c-chip:var(--c-ground);
  --c-chip-btn:var(--c-tint);
  --c-badge:var(--c-cobalt);
  --c-badge-ink:var(--c-white);
  --c-bar:var(--c-ink);
  --c-bar-ink:var(--c-white);
  --c-act:var(--c-sun);
  --c-act-ink:var(--c-ink);
  --c-off:var(--c-tint);
  /* colour of the two drawings (pouch and jar) */
  --il-line:var(--c-ink);
  --il-glass:var(--c-tint);
  --il-fill:#f4c86a;
  --il-fill2:#e8aa44;
  --il-fill3:#d9922e;
  --il-bg:#cf8a2a;
  --il-fill-dark:#a8661a;
  --il-gold:#e0a400;
  --il-gold-dark:#a97800;
  --il-gold-lt:#f7d25a;
  --il-lid:var(--c-ink-soft);
  --il-ridge:var(--c-ink);
  --il-hole:var(--c-ink);
  --il-hi:var(--c-white);
  --il-sw:1.5px;
  --il-fine-sw:1px;
  --il-cube-sw:.75px;
  --il-hi-op:.55;
  --ar-pouch:58/100;
  --ar-jar:80/100;
  /* type */
  --f-display:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --w-display:800;
  --ls-display:-.01em;
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  --fs-body:.9375rem;
  --fs-md:1rem;
  --fs-lg:1.125rem;
  --fs-h:1.375rem;
  --fs-total:1.375rem;
  /* shape */
  --bw:2.5px;
  --hair:1px;
  --ring:3px;
  --r-frame:28px;
  --r-card:22px;
  --r-tile:18px;
  --r-panel:30px;
  --r-sheet:26px;
  --r-pill:999px;
  --shadow-hard:3px 3px 0 var(--c-ink);
  --shadow-card:4px 4px 0 var(--c-ink);
  --shadow-bar:0 -6px 0 var(--c-sun);
  /* space */
  --s-0:2px;
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  /* sizes */
  --frame-h:150px;
  --frame-h-wide:172px;
  --frame-h-band:190px;
  --frame-h-large:96px;
  --hero-y:75%;
  --hero-y-band:73%;
  --logo:80px;
  --logo-above:64px;
  --logo-band:96px;
  --icon:48px;
  --tap:44px;
  --stepper-h:52px;
  --stepper-w:152px;
  --stepper-w-sm:128px;
  --art-h:84px;
  --art-pad:6px;
  --tile-min:140px;
  --bar-h:72px;
  --order-w:360px;
  --tool-h:calc(var(--icon) + 2 * var(--s-1) + 2 * var(--bw));
  /* the scale of each drawing in its art box (a new item without one is drawn at full size) */
  --f-small:.62;
  --f-medium:.8;
  --f-large:1;
  --f-jar1:.6;
  --f-jar2:.74;
  --f-jar3:.88;
  --f-jar4:1;
  /* focus ring on the dark order bar */
  --c-focus-dark:var(--c-sun);
  --c-toast:var(--c-ink);
  --c-toast-ink:var(--c-white);
  /* motion: short, and each one answers a tap */
  --dur-swap:120ms;
  --dur-fade:150ms;
  --dur-sheet:200ms;
  --dur-picture:200ms;
  --ease:cubic-bezier(.2,.7,.3,1);
  /* layout */
  --page-max:1280px;
  --sheet-max:480px;
}