/* TwoMakers — Token alphabet
   25 squircle glyphs (A-Z, no G) extracted from the .fig as bare SVG paths.
   Render via <span class="tm-token" data-letter="A"></span>
   Resize via --tm-token-size (default 64px).
   Recolour the tile + glyph independently via --tm-token-bg / --tm-token-fg. */

.tm-token {
  --tm-token-size: 64px;
  --tm-token-bg: var(--tm-moss);
  --tm-token-fg: var(--tm-acid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tm-token-size);
  height: var(--tm-token-size);
  border-radius: calc(var(--tm-token-size) * 0.3125); /* 20/64 */
  background: var(--tm-token-bg);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
}

.tm-token svg {
  width: 62%;
  height: 62%;
  fill: var(--tm-token-fg);
  display: block;
}

/* Variant: pop the colours */
.tm-token--fire    { --tm-token-bg: var(--tm-fire);    --tm-token-fg: var(--tm-paper); }
.tm-token--cotton  { --tm-token-bg: var(--tm-cotton);  --tm-token-fg: var(--tm-forest); }
.tm-token--bone    { --tm-token-bg: var(--tm-bone);    --tm-token-fg: var(--tm-forest); }
.tm-token--forest  { --tm-token-bg: var(--tm-forest);  --tm-token-fg: var(--tm-acid); }
.tm-token--acid    { --tm-token-bg: var(--tm-acid);    --tm-token-fg: var(--tm-forest); }
.tm-token--ink     { --tm-token-bg: var(--tm-ink);     --tm-token-fg: var(--tm-acid); }