/* 1-800-SHILL tokens. Every colour, font and size lives here. See DESIGN.md for each token's one job. */
:root {
  /* the wall and paper */
  --wall: #EEEAE2;
  --wall-2: #E4DFD4;
  --paper: #FFFDF7;
  --slip: #F8D3D9;            /* phone message slips (callers) only */

  /* toner */
  --ink: #1A1714;
  --ink-2: #4B453E;
  --muted: #6B645B;
  --line: rgba(26, 23, 20, .10);
  --line-2: rgba(26, 23, 20, .18);
  --line-3: rgba(26, 23, 20, .30);

  /* the accent: goldenrod copy paper. The house flyer and "clock in". */
  --gold: #F2C230;
  --gold-2: #E5B21C;
  /* red ink: live, stamped, urgent. Never a button. */
  --red: #D8362A;

  /* form states only */
  --good: #1E7A4C;
  --bad: #B3261E;

  /* type */
  --f-text: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Archivo", "Arial Narrow", ui-sans-serif, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-stretch: 62%;

  --t-hero: clamp(44px, 6.4vw, 92px);
  --t-h1: clamp(40px, 5.4vw, 72px);
  --t-h2: clamp(32px, 3.8vw, 52px);
  --t-h3: 20px;
  --t-lede: clamp(17px, 1.4vw, 19px);
  --t-body: 16px;
  --t-small: 14px;
  --t-label: 12px;

  /* shape and depth */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --shadow-paper: 0 1px 0 rgba(26, 23, 20, .07), 0 14px 26px -16px rgba(48, 34, 14, .38);
  --shadow-lift: 0 1px 0 rgba(26, 23, 20, .07), 0 22px 34px -18px rgba(48, 34, 14, .45);

  /* layout */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 9vw, 120px);
  --header: 64px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-press: 100ms;
  --t-hover: 220ms;

  /* office papers a project can pick */
  --paper-goldenrod: #F2C230;
  --paper-canary: #F7E27A;
  --paper-pink: #F6B9C9;
  --paper-sky: #AFCFEA;
  --paper-mint: #BEDFB4;
  --paper-salmon: #F6B48F;
  --paper-lilac: #CFC0EC;
  --paper-white: #FFFDF7;
}