/* Pixel Art — generated from design-guide/pixel-art.md. Do not edit by hand. */
:root {
  --colors-mode: dark;
  --colors-palette-bg: #1A1C2C;
  --colors-palette-panel: #333C57;
  --colors-palette-foreground: #F4F4F4;
  --colors-palette-green: #38B764;
  --colors-palette-yellow: #FFCD75;
  --colors-palette-red: #EF4A5B;
  --colors-palette-blue: #41A6F6;
  --colors-palette-shadow: #29366F;
  --typography-scale: default;
  --typography-families-bitmap: "Press Start 2P", "Silkscreen", monospace;
  --typography-families-sans: "Inter", system-ui, sans-serif;
  --typography-heading-tracking-em: 0;
  --typography-heading-line-height: 1.6;
  --typography-body-size-px: 16;
  --typography-body-line-height: 1.6;
  --layout-system: grid;
  --layout-density: comfortable;
  --layout-columns: 12;
  --layout-max-width-px: 1024;
  --layout-grid-unit-px: 8;
  --layout-section-spacing-px: 32, 64, 96;
  --shape-radius-px: 0;
  --shape-border-px: 4;
  --shape-border-style: stepped pixel corners;
  --shape-shadow: 4px 4px 0 #29366F;
  --motion-duration-ms: 100;
  --motion-easing: steps(4, end);
  --motion-properties: transform, background-position;
  --motion-intensity: stepped;
  --imagery-treatment: sprites, tilesets, nearest-neighbour scaling, dithered gradients;
  --imagery-illustration: pixel sprites at 1x, 2x or 3x scale;
  --imagery-icons: 16x16 or 24x24 pixel icons;
}