/* Component styles that consume the design tokens defined in tokens.css (loaded first).
   Use var(--token) only — no raw hex/px here. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--space) * 2);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

.page {
  max-width: 34rem;
  text-align: center;
  background: var(--color-surface);
  padding: calc(var(--space) * 2);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.page__art {
  width: min(240px, 60%);
  height: auto;
  margin-bottom: var(--space);
}

.page__title {
  margin: 0 0 calc(var(--space) / 2);
  font-size: 2rem;
  color: var(--color-brand);
}

.page__lede {
  margin: 0 0 var(--space);
  color: var(--color-muted);
}

.page__status {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
}