/* Design tokens */
:root {
  --color-bg:       #f5f5f0;
  --color-fg:       #111111;
  --color-muted:    #666666;
  --color-border:   #cccccc;
  --color-link:     #0000cc;
  --color-link-visited: #551a8b;
  --color-accent:   #cc0000;

  --font-mono:      'Courier New', Courier, monospace;
  --font-sans:      system-ui, -apple-system, sans-serif;

  --ratio: 1.5;
  --s-1: calc(1rem / var(--ratio));
  --s0:  1rem;
  --s1:  calc(var(--s0) * var(--ratio));
  --s2:  calc(var(--s1) * var(--ratio));

  --space-xs: calc(var(--s-1) / 2);
  --space-sm: var(--s-1);
  --space-md: var(--s0);
  --space-lg: var(--s1);
  --space-xl: var(--s2);

  --measure: 65ch;
}

/* Reset */
:where(*, *::before, *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:where(html) {
  font-family: var(--font-mono);
  font-size: 87.5%;
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-fg);
}

:where(a) {
  color: var(--color-link);
}

:where(a:visited) {
  color: var(--color-link-visited);
}

:where(ul, ol) {
  list-style: none;
}

:where(button) {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Shared loading state — used by feed, card, game */
.feed__loading,
.celeb-card__loading {
  color: var(--color-muted);
  animation: blink 1.2s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0.3; }
}

/* 404 page */
.not-found {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-lg);

  & .not-found__message {
    font-size: 1.2rem;
    font-weight: bold;
  }

  & .not-found__back {
    font-size: 0.9rem;
  }
}