/* Generated by site/build.mjs from site/tokens.json (the Yonderlume design system). Do not edit. */
:root {
  --grey-1: #1b1a2e;
  --grey-2: #3a3a52;
  --grey-3: #5f6179;
  --grey-4: #8f91a8;
  --grey-5: #c4c6d4;
  --grey-6: #f1f2f7;
  --red-1: #6b1d3a;
  --red-2: #b5304f;
  --red-3: #ef5a6a;
  --red-4: #ff9a8a;
  --orange-1: #7a2f1c;
  --orange-2: #c9562a;
  --orange-3: #f4873d;
  --orange-4: #ffc06b;
  --yellow-1: #8a5a16;
  --yellow-2: #d99a24;
  --yellow-3: #f9d048;
  --yellow-4: #fff2a3;
  --grass-1: #2e5f2a;
  --grass-2: #4f9b3a;
  --grass-3: #86cf4d;
  --grass-4: #c6ef7e;
  --green-1: #1a3f38;
  --green-2: #256e52;
  --green-3: #3fa06e;
  --green-4: #7fcf98;
  --teal-1: #1b4455;
  --teal-2: #247a86;
  --teal-3: #3fb5bb;
  --teal-4: #8ee6e0;
  --blue-1: #22306e;
  --blue-2: #3458b8;
  --blue-3: #4f8ef5;
  --blue-4: #9ccbff;
  --purple-1: #3b2461;
  --purple-2: #6d43a6;
  --purple-3: #a070e0;
  --purple-4: #d2aaf5;
  --brown-1: #3e2418;
  --brown-2: #6e4330;
  --brown-3: #a56b48;
  --brown-4: #d8a37a;
  --sand-1: #8c6b48;
  --sand-2: #c49a68;
  --sand-3: #e8c995;
  --sand-4: #fbe9c6;
  --skin-1: #7a3f2e;
  --skin-2: #c47a5a;
  --skin-3: #f0b48e;
  --skin-4: #ffdcc0;
  --hair-1: #2a1b2e;
  --hair-2: #5a3a4a;
  --hair-3: #9a6a6e;
  --hair-4: #d8a8a0;
  --eyes-1: #2a4a9a;
  --eyes-2: #6fa0ff;
  --dye-1-1: #8a1d1d;
  --dye-1-2: #d13b3b;
  --dye-1-3: #ff6a5a;
  --dye-1-4: #ffb08a;
  --dye-2-1: #1d3a8a;
  --dye-2-2: #2f63d1;
  --dye-2-3: #5a9cff;
  --dye-2-4: #a8d4ff;
  --ink: var(--grey-1);
  --ink-soft: var(--grey-3);
  --surface: var(--sand-4);
  --surface-alt: var(--sand-3);
  --surface-edge: var(--sand-1);
  --hp: var(--red-3);
  --mp: var(--blue-3);
  --exp: var(--yellow-3);
  --focus: var(--blue-2);
  --font-display: "Pixelify Sans", "Silkscreen", monospace;
  --font-ui: "Silkscreen", "Pixelify Sans", monospace;
  --px: 1px;
  --icon-margin: 2px;
  --ground-inset: 4px;
  --space-4: 4px;
  --space-8: 8px;
  --tile: 16px;
  --icon: 32px;
  --mob-s: 48px;
  --cell-w: 64px;
  --cell-h: 80px;
  --mob-m: 96px;
  --tileset: 128px;
  --mob-l: 160px;
  --mob-boss: 256px;
  --decor-max: 512px;
  --screen-w: 960px;
  --screen-h: 540px;
  --radius-0: 0px;
  --radius-1: 1px;
  --radius-2: 2px;
  --shadow-panel: 1px 1px 0 #8c6b48;
  --shadow-pressed: 0 0 0 #8c6b48;
  --shadow-glow: 0 0 0 1px #fff2a3;
}