:root {
  --c-white: #ffffff;
  --c-white-sh: #878787;

  --c-gray: #aaaaaa;
  --c-gray-sh: #5a5a5a;

  --c-dgray: #555555;
  --c-dgray-sh: #2c2c2c;

  --c-pink: #ef5bfd;
  --c-pink-sh: #7f3086;

  --c-lilac: #f7a9ff;
  --c-lilac-sh: #835a87;

  --c-red: #ff5555;
  --c-red-sh: #862d2d;

  --c-green: #00ff21;
  --c-green-sh: #00870f;

  --c-yellow: #ffff55;
  --c-yellow-sh: #87872d;

  --c-vip: #7dfc4c;
  --c-vip-sh: #428628;

  --c-mvp: #3aa7fc;
  --c-mvp-sh: #1f5886;

  --c-elite: #be4cfc;
  --c-elite-sh: #652886;

  --c-supporter: #ffcc00;
  --c-supporter-sh: #876c00;

  --c-common: #aaaaaa;
  --c-common-sh: #5a5a5a;

  --c-rare: #3aa7fc;
  --c-rare-sh: #1f5886;

  --c-plain: #ffffff;
  --c-plain-sh: #878787;

  /* set per-card by store.js, falls back to plain */
  --tier: var(--c-plain);
  --tier-sh: var(--c-plain-sh);

  --leaf-light: #f7b9dc;
  --leaf-mid: #e899c3;
  --leaf-dark: #e076ae;

  --bg-void: #0b0710;
  --bg-panel: #17101f;
  --bg-slot: #241a2e;

  --px: 2px;
  --gap-1: 2px;
  --gap-2: 4px;
  --gap-3: 8px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;
  --gap-8: 64px;

  --fs-sm: 18px;
  --fs-md: 27px;
  --fs-lg: 36px;
  --fs-xl: 54px;
  --fs-hero: 72px;
}