/* Hock: a pawnbroker's counter after hours. Every colour, font, radius and easing is a token here; base.css and
   hock.css only read them. DESIGN.md has the jobs and the budget. */
:root {
  color-scheme: dark;

  /* bottle black, and steps of the same green */
  --bg: #0f1613;
  --bg-2: #131c18;
  --surface: #17221d;
  --surface-2: #1e2b25;

  /* hairlines: cream at low strength */
  --line: rgba(241, 234, 217, 0.08);
  --line-2: rgba(241, 234, 217, 0.16);
  --line-3: rgba(241, 234, 217, 0.26);

  /* cream text in three steps */
  --ink: #f1ead9;
  --ink-2: #c9c1ad;
  --muted: #9a9785;

  /* brass: money moving. The primary button, "you receive", the one figure that matters. */
  --accent: #d8a84e;
  --accent-2: #e6bd6c;
  --on-accent: #1a140a;

  /* wax: the seal and only the seal */
  --wax: #b5372b;
  --wax-deep: #8a2920;
  --wax-light: #cf5546;

  /* the ticket's own world */
  --paper: #ece1c6;
  --paper-2: #e1d3b2;
  --paper-line: rgba(43, 35, 24, 0.22);
  --paper-ink: #2b2318;
  --paper-muted: #645947;
  --stamp-green: #2f6b46;

  /* states only, never decoration */
  --good: #86c49a;
  --bad: #ee7a5f;
  --warn: #e9c46a;

  /* display shouts (h1, h2, the one big figure), text talks, mono keeps the receipts (and types the tickets) */
  --font-display: "Fraunces", "Georgia", serif;
  --font-text: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --display-weight: 850;
  --display-tracking: -0.02em;
  --display-axes: "SOFT" 100, "opsz" 144;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  --shadow: 0 1px 0 rgba(241, 234, 217, 0.04) inset, 0 24px 60px -36px rgba(0, 0, 0, 0.9);
  --paper-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 2px 0 rgba(0, 0, 0, 0.08), 0 18px 36px -18px rgba(0, 0, 0, 0.75), 0 40px 80px -40px rgba(0, 0, 0, 0.6);

  /* quick out, settles exactly, no bounce */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t: 280ms;

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