/* Design tokens (BUILD_PLAN 2.2; GAME_DESIGN 11.1, 11.9).
   The chrome uses the same sixteen colors as the pictures, so a page and its
   picture never disagree. test/unit/palette.test.mjs keeps these equal to
   web/js/gfx/palette.js. */

@font-face {
  font-family: "Pixelify Sans";
  src: url("../fonts/PixelifySans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --c0: #1b1f2a;  /* ink */
  --c1: #24324a;  /* night navy */
  --c2: #3f5a7a;  /* slate */
  --c3: #8fb3c9;  /* glacier blue */
  --c4: #f2efe6;  /* snow */
  --c5: #e8d9b5;  /* paper cream */
  --c6: #e09a8a;  /* alpenglow pink */
  --c7: #e8b33a;  /* bonfire gold: the lily only */
  --c8: #c4602d;  /* rust: never carries text */
  --c9: #8a3b2a;  /* brick */
  --c10: #5a3d2b; /* bark */
  --c11: #1f3b33; /* spruce */
  --c12: #2f5b45; /* forest */
  --c13: #6b8a4a; /* moss */
  --c14: #a7b88a; /* sage */
  --c15: #3f7f7a; /* teal */

  --ink: var(--c0);
  --page: var(--c0);
  --paper: var(--c5);
  --box-fill: var(--c4);
  --box-border: var(--c9);

  /* One device pixel, in CSS px. Borders are whole device pixels. */
  --dp: 1px;

  --font-pixel: "Pixelify Sans", ui-monospace, "Courier New", monospace;
  --target: 44px;
  --choice-h: 52px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@media (min-resolution: 2dppx) {
  :root { --dp: 0.5px; }
}
@media (min-resolution: 3dppx) {
  :root { --dp: 0.33333px; }
}