@font-face {
  font-family: Manrope;
  src: url("./manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* The public site and its reading surfaces share one brand foundation. */
:root {
  --forest: #08271f;
  --forest-deep: #041a16;
  --cream: #fff0cd;
  --gold: #f4c761;
  --gold-hover: #ffda81;
  --paper: #f7f5ec;
  --ink: #16382d;
  --muted: #52655a;
  --line: #d5ddd2;
  --focus: #a64b00;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --brand-font: Manrope, system-ui, sans-serif;
}

/* A WordFlow letter tile: the game's board piece, reused for numbering and display moments.
   Shared by the landing and docs surfaces, which both load this foundation. */
.letter-tile {
  --tile-size: 64px;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: calc(var(--tile-size) * 0.22);
  color: var(--forest-deep);
  background: linear-gradient(180deg, #fff7e2, #f1dfb4);
  font-family: var(--brand-font);
  font-size: calc(var(--tile-size) * 0.5);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 5px 0 #b99a5a, 0 12px 24px var(--tile-ambient, #0003), inset 0 1px #fff;
}
.letter-tile--accent {
  color: var(--cream);
  background: linear-gradient(180deg, #8a63d8, #5b3aa8);
  box-shadow: 0 5px 0 #3b2470, 0 12px 24px var(--tile-ambient, #0003), inset 0 1px #fff6;
}