/* Pennydrop's tokens (DESIGN.md). One job per colour: gold is money coming back to you and nothing else; red is the
   machine and the one action; the screen colour is display windows only. Hard shadows, no gradients, no glow. */
:root {
  --wall: #FFF3DC;
  --wall-2: #F6E6C6;
  --wall-3: #EDD9B2;
  --panel: #FFFAF1;
  --ink: #1E1512;
  --ink-2: #4B3A33;
  --muted: #75645B;
  --line: rgb(30 21 18 / 0.10);
  --line-2: rgb(30 21 18 / 0.18);
  --line-3: rgb(30 21 18 / 0.32);
  --red: #CC3820;
  --red-deep: #9E2A15;
  --red-soft: #E9B7A8;
  --screen: #18110F;
  --seg: #FFEFD2;
  --coin: #F2B935;
  --coin-deep: #B9831A;
  --coin-ink: #8A5800;
  --good: #2F7A3D;
  --bad: #B3261E;
  --warn: #9A6200;
  --on-red: #FFF3DC;

  --font-display: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --font-text: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-red: 8px 8px 0 var(--red-deep);
  --border: 2px solid var(--ink);
  --hair: 1px solid var(--line-2);

  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 66px;
  --t-fast: 120ms;
  --t: 280ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --drop: cubic-bezier(.3, 0, .2, 1);
}