/*
 * Design tokens.
 * Greys, beige and slate come from the NPC artwork (face grey, avatar backdrop, shirt).
 * HUD darks, XP green and name yellow come from the wenpc.family interface.
 */
:root {
  /* the NPC world */
  --ink: #1b1c1e;
  --npc: #a9a9a9;
  --npc-bg: #a4a4a4;
  --npc-2: #959595;
  --npc-light: #bdbdbd;
  --paper: #dfd8d0;
  --paper-2: #e9e4dd;
  --slate: #6b7384;
  --slate-dark: #4f5666;

  /* the HUD (wenpc.family) */
  --hud: #0e1012;
  --panel: #16191c;
  --panel-2: #1c2024;
  --line: #2b3036;
  --line-2: #3a4148;
  --text: #e4e6e8;
  --muted: #88909a;
  --xp: #8fe388;
  --xp-dark: #3f7a3a;
  --name: #ffd166;
  --link: #8cc8ff;
  --down: #ff7a7a;

  /* tiers */
  --copper: #d27d4f;
  --bronze: #a9773a;
  --silver: #d5d9de;
  --gold: #f4c542;
  --platinum: #e6f4f7;

  /* type */
  --pixel: 'Silkscreen', ui-monospace, monospace;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* layout */
  --hud-h: 64px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);

  /* soft grain, like the supplied artwork */
  --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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}