/* IMPACT FRAME — css/tokens.css
   Design tokens: paper, ink, spot red, tone, type. Light and dark. */
:root {
  --paper: #f1f0eb;
  --paper-2: #e8e6de;
  --paper-3: #dcd9cf;
  --ink: #141417;
  --ink-2: #46454b;
  --ink-3: #727078;
  --rule: #c9c6bc;
  --spot: #e8283c;
  --spot-text: #b51b2d;
  --spot-wash: #f5d7d4;
  --on-ink: #f1f0eb;
  --desk: #e3e0d7;
  --dot: rgba(20, 20, 23, 0.22);
  --shadow: rgba(20, 20, 23, 0.16);
  /* the game is always printed on paper, in both themes */
  --print-paper: #f1f0eb;
  --print-ink: #141417;
  --print-spot: #e8283c;
  --print-tone: #c9c7c0;
  --f-display: "Dela Gothic One", "Arial Black", Impact, sans-serif;
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1320px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131315;
    --paper-2: #1b1b1e;
    --paper-3: #26262a;
    --ink: #ecebe6;
    --ink-2: #b6b4ae;
    --ink-3: #85837e;
    --rule: #36363b;
    --spot: #ff4458;
    --spot-text: #ff7380;
    --spot-wash: #3b1a1f;
    --on-ink: #131315;
    --desk: #0c0c0e;
    --dot: rgba(236, 235, 230, 0.16);
    --shadow: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131315;
  --paper-2: #1b1b1e;
  --paper-3: #26262a;
  --ink: #ecebe6;
  --ink-2: #b6b4ae;
  --ink-3: #85837e;
  --rule: #36363b;
  --spot: #ff4458;
  --spot-text: #ff7380;
  --spot-wash: #3b1a1f;
  --on-ink: #131315;
  --desk: #0c0c0e;
  --dot: rgba(236, 235, 230, 0.16);
  --shadow: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }