/* Páginas de erro (403/404/500) e manutenção (503). Só tokens; claro/escuro pelo tokens.css. */

.ds-err {
  position: relative;          /* contém o .ds-sr-only (absoluto) */
  max-width: 560px;
  margin-block: var(--space-12);
  padding: var(--space-10) var(--space-6);
  gap: var(--space-3);
}

/* O código vira o elemento principal; o ícone pequeno some */
.ds-err .ds-state-icon { display: none; }

.ds-err-code {
  margin: 0;
  background: linear-gradient(135deg, var(--brand), color-mix(in oklch, var(--brand) 35%, var(--foreground)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(72px, 16vw, 128px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}

.ds-err-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  width: 100%;
}

.ds-err-links a { color: var(--muted-foreground); font-size: var(--text-md); text-decoration: none; }
.ds-err-links a:hover { color: var(--foreground); text-decoration: underline; }

.ds-err .ds-state-title { line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.ds-err .ds-state-text { font-size: var(--text-md); line-height: var(--leading-normal); }

.ds-err-search {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}

.ds-err-search .form-control { flex: 1 1 auto; min-width: 0; min-height: var(--target-min); }
.ds-err-search .btn { min-height: var(--target-min); }

.ds-err-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
}

.ds-err-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
}

.ds-err-contact {
  margin: var(--space-3) 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.ds-err-contact a { color: var(--brand-text); }

@media (max-width: 480px) {
  .ds-err-actions { flex-direction: column; }
  .ds-err-actions .btn { width: 100%; }
}

/* Documento autossuficiente (500): sem cabeçalho do tema */
.ds-err-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: var(--background);
  color: var(--foreground);
}

.ds-err-brand {
  width: 100%;
  padding: var(--space-4) var(--page-gutter, var(--space-4));
  border-bottom: 1px solid var(--border);
}

.ds-err-brand a { color: var(--foreground); font-weight: 600; text-decoration: none; }
.ds-err-body .ds-err { margin-block: var(--space-16); }

/* Manutenção: a página inteira é o estado */
.ds-err-maint { min-height: 60vh; justify-content: center; }

.ds-err-body *, .ds-err-body *::before, .ds-err-body *::after { box-sizing: border-box; }
.ds-err-body { font-family: var(--font-sans, system-ui, sans-serif); }
.ds-err-body .ds-err { padding-inline: var(--page-gutter); }
.ds-err-body .btn { text-decoration: none; border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); font-weight: 500; cursor: pointer; }
.ds-err-body .btn-primary { background: var(--primary); color: var(--primary-foreground); }
.ds-err-body .btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.ds-err-brand { box-sizing: border-box; }