/* ============================================================
   GPS IMOBILIÁRIO — 404 screen
   Alinhado com paleta v0.9.0 (navy/cream/terracotta)
   Tokens: base.css (--ink, --cream, --accent, --font-*, --space-*)
   ============================================================ */

.screen-404 {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background: var(--cream);
  animation: screen-404-fadein 300ms ease-out;
}

.screen-404-box {
  max-width: 520px;
  width: 100%;
  text-align: center;
}

.screen-404-code {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(72px, 18vw, 140px);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
  opacity: 0.2;
  margin-bottom: var(--space-sm);
}

.screen-404-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--space-md) 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.screen-404-msg {
  font-size: var(--font-base);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xl) 0;
}

.screen-404-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.screen-404-actions .btn {
  min-width: 180px;
}

@media (min-width: 640px) {
  .screen-404-title { font-size: var(--font-3xl); }
}

@keyframes screen-404-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}