/* PTF: the till receipt. Cream counter, white-ish paper, black ink, and red ink for one thing only: the money
   you are about to pay (DESIGN.md). Every colour, font, radius and easing is a token; base.css and ptf.css read them. */
:root {
  color-scheme: light;

  /* the counter, the paper, the wells */
  --bg: #efe7d6;
  --bg-2: #e9e0cc;
  --paper: #fbf8f1;
  --surface: #f7f2e6;
  --surface-2: #e6dcc7;
  --rail: #1c1915;
  --rail-2: #2b2620;

  /* hairlines and receipt rules, in the ink colour */
  --line: rgba(23, 20, 15, 0.1);
  --line-2: rgba(23, 20, 15, 0.2);
  --line-3: rgba(23, 20, 15, 0.34);

  /* ink */
  --ink: #17140f;
  --ink-2: #3f3a32;
  --muted: #6a655c;

  /* red ink: the primary button, every TOTAL / YOU PAY line, the headline's second beat. Nothing else. */
  --accent: #c8321c;
  --accent-2: #a92812;
  --on-accent: #fff8ee;

  /* states only */
  --good: #1e6b3f;
  --bad: #17140f; /* problems are ink on a highlighter mark, never a second red */
  --warn: #f3d677;

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-text: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.01em;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  --shadow: 0 1px 0 rgba(23, 20, 15, 0.06), 0 18px 36px -24px rgba(23, 20, 15, 0.45);
  --paper-drop: drop-shadow(0 1px 0 rgba(23, 20, 15, 0.08)) drop-shadow(0 14px 18px rgba(23, 20, 15, 0.16));

  /* quick out, settles exactly */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t: 260ms;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 64px;
}