/* ============================================================
   PI² — Base: tipografia, acessibilidade e moldura de tela (compartilhado)
   ============================================================ */

/* ---------- Base ---------- */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--pi-ink);
  background: var(--pi-stage);
}

h1, h2, h3, h4, .display-heading {
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--pi-ink);
  letter-spacing: -0.02em;
}

a {
  color: var(--pi-red-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--pi-red-900);
}

/* Foco visível (regra de acessibilidade — nunca remover) */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--pi-red-600);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Tela (viewport inteira) ---------- */
.screen {
  min-height: 100dvh;
  display: flex;
  padding: 40px 20px;
  background: var(--pi-cream);
}

.screen--login {
  background: #fbfaf7;
}

.screen__inner {
  margin: auto; /* evita corte de conteúdo em telas baixas */
  width: 100%;
  max-width: 460px;
  min-width: 0; /* permite encolher mesmo com conteúdo de largura mínima */
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 80px);
}

@media (min-width: 768px) {
  .screen {
    padding: 56px 32px;
  }

  .screen__inner {
    min-height: calc(100dvh - 112px);
  }
}