/* THE BRAND, UI side: colours and type. Pixel-art Penthouse: aubergine ink, flamingo pink, coin gold, mint. */
:root {
  --ink: #2a1238;          /* aubergine: panels, keylines */
  --ink-2: #3d1b52;
  --ink-3: #160920;        /* deepest: hard shadows */
  --cream: #fff6ea;
  --blush: #ffd6e7;
  --muted: #c3a6d6;
  --dim: #8a6ba3;
  --pink: #ff3d8b;
  --pink-hi: #ff8cbc;
  --pink-lo: #b8165e;
  --gold: #ffc83a;
  --gold-lo: #c98a12;
  --mint: #36f0b5;
  --mint-lo: #13a57a;
  --violet: #7a3fc2;
  --red: #ff5a4a;
  --display: 'Jersey 10', 'Pixelify Sans', monospace;
  --label: 'Tiny5', 'Silkscreen', monospace;
  --ui: 'Bricolage Grotesque', system-ui, sans-serif;
  --px: 3px;               /* one "art pixel" for UI chrome */
  --step: polygon(0 var(--px), var(--px) var(--px), var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
}