/* The paper: warm cream, graphite ink, Gloock and Figtree (ADR 0036,
   docs/design-system.md, "The paper"). One palette, declared once, for
   every page printed on it: the hub (static/css/site.css: the shelf, the
   Dailies page, your account), the technical guide (static/guide/guide.css)
   and the pencil-puzzle kit (games/puzzles/kit/puzzles.css, which adds each
   puzzle's accent and the kit's own tokens). Load this first; each of those
   roots then reads these names and sets no paper color of its own
   (npm run check:tokens holds them to it).

   Always paper, whatever the reader's dark-mode setting: a printed page
   doesn't turn dark (color-scheme: light, no dark block), so a puzzle, the
   shelf it's on and the manual about it all read the same at night. */

@font-face {
  font-family: "Gloock";
  src: url("../puzzles/kit/fonts/gloock-400-latin.0456cdad81a5.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Figtree";
  src: url("../puzzles/kit/fonts/figtree-400-800-latin.392aed3eb142.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: optional;
}

:root {
  /* the paper (the page), a sheet or card on it, and the desk a page lies on */
  --paper: #f4efe3;
  --paper-2: #fffdf7;        /* a sheet or card on the paper */
  --paper-edge: #ddd5c3;     /* a sheet's or card's edge, a hairline rule */
  --desk: #e9e2d0;           /* what a puzzle's page lies on */
  --ink: #22262b;            /* graphite */
  --soft: #5b5f66;           /* soft ink: 5.5:1 on --paper, 5.7:1 on --desk, 6.4:1 on --paper-2 */
  --line: #c9c1ae;           /* a choice group's soft line, a field's edge, a divider */
  --line-bold: #22262b;      /* a region's border, an outlined button */
  /* colors with jobs (house rule 9) that read on the paper */
  --good: #2f7a57;           /* solved, done */
  --bad: #b5372c;            /* a mistake, a form's error */
  /* a card on the paper: a lit top edge and a soft shadow under it; lifted, a longer one */
  --card-shadow: 0 1px 0 #fff inset, 0 10px 24px -16px rgba(60, 48, 20, .55), 0 1px 3px rgba(60, 48, 20, .1);
  --card-shadow-up: 0 1px 0 #fff inset, 0 18px 30px -16px rgba(60, 48, 20, .6), 0 2px 5px rgba(60, 48, 20, .12);
  /* a trace of grain, so the paper isn't flat */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* faces: Gloock for titles (a high-contrast serif, 400 only), Figtree for everything you read or press */
  --display: "Gloock", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --ui: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}