/* punchpad: office paper and card stock under flat daylight. One accent, punch red, and it means "this acts":
   the primary button, the punch head, the run counter, the headline's second beat. See DESIGN.md. */
:root {
  color-scheme: light;

  /* paper, then the steps of it */
  --bg: #f1ece2;
  --bg-2: #e9e2d3;
  --surface: #fbf8f2;
  --surface-2: #e3dacb;

  /* card stock and what is printed on it */
  --stock: #ead9b0;
  --stock-edge: #cdb889;
  --print: #8a6f3a;
  --hole: #1d1a15;

  /* hairlines, in the ink */
  --line: rgba(23, 24, 29, 0.1);
  --line-2: rgba(23, 24, 29, 0.18);
  --line-3: rgba(23, 24, 29, 0.3);

  --ink: #17181d;
  --ink-2: #45474f;
  --muted: #65635d;

  --accent: #c4361f;
  --accent-ink: #a82c17;
  --on-accent: #fff8f0;

  --good: #2c7a4b;
  --bad: #b3261e;
  --warn: #8f5b00;

  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;

  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --r-pill: 999px;
  --border: 1px solid var(--line-2);
  /* a card resting on a desk: short, hard, no blur */
  --shadow: 0 1px 0 rgba(23, 24, 29, 0.06), 2px 3px 0 rgba(23, 24, 29, 0.07);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t: 300ms;

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