:root {
  --jcat-red-deep: #8b1e1e;
  --jcat-red-warm: #e25335;
  --jcat-yellow: #d9a426;
  --jcat-green: #5e653d;
  --jcat-slate: #26313a;
  --jcat-cream: #f2e8d8;
  --jcat-gray: #8c867c;
  --jcat-ink: #151719;

  --jcat-font-display: "Rubik Wet Paint", Impact, "Arial Black", sans-serif;
  --jcat-font-meme: Bangers, Impact, "Arial Black", sans-serif;
  --jcat-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --jcat-radius-sm: 8px;
  --jcat-radius-md: 14px;
  --jcat-radius-round: 999px;

  --jcat-shadow-painted: 0 16px 38px rgba(38, 49, 58, 0.22);
  --jcat-border-painted: 4px solid var(--jcat-slate);
}

.jcat-bg {
  background: var(--jcat-cream);
  color: var(--jcat-slate);
  font-family: var(--jcat-font-body);
}

.jcat-wordmark {
  color: var(--jcat-yellow);
  font-family: var(--jcat-font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--jcat-red-deep);
  text-shadow: 3px 3px 0 var(--jcat-slate);
}

.jcat-button {
  align-items: center;
  background: var(--jcat-red-deep);
  border: 3px solid var(--jcat-slate);
  border-radius: var(--jcat-radius-round);
  color: var(--jcat-cream);
  display: inline-flex;
  font-family: var(--jcat-font-meme);
  font-size: 1rem;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 44px;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  text-transform: uppercase;
}