/* Tokens da direção "B · Observatório" (docs/design.md) */
:root {
  --space-0: #070B1E;
  --space-1: #0B1029;
  --space-glow: #18204A;
  --line: #273061;
  --star: #F2EEE3;
  --text-2: #BDB8D9;
  --nebula: #A99BFF;
  --nebula-soft: #C9C2FF;
  --sun: #F3C77A;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: radial-gradient(120% 70% at 50% 38%, var(--space-glow) 0%, var(--space-1) 45%, var(--space-0) 100%) fixed;
  background-color: var(--space-0);
  color: var(--star);
  font: 15px/1.5 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--nebula-soft); text-underline-offset: 3px; }
a:hover { color: var(--star); }
a:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

/* Página inicial */
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 16px 24px;
}

.galaxy {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 1;
  margin-bottom: 8px;
  transform: rotate(-18deg) scaleY(.5);
}

.arms {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 8%, rgba(169,155,255,.55) 14%, transparent 26% 41%,
                   rgba(201,194,255,.45) 47%, transparent 59% 74%, rgba(143,168,255,.5) 80%, transparent 92%);
  -webkit-mask: radial-gradient(circle, #000 18%, rgba(0,0,0,.6) 45%, transparent 70%);
          mask: radial-gradient(circle, #000 18%, rgba(0,0,0,.6) 45%, transparent 70%);
  filter: blur(6px);
  animation: spin 90s linear infinite;
}

.core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #FFF6DF 0%, var(--sun) 35%, rgba(243,199,122,0) 72%);
  box-shadow: 0 0 60px 18px rgba(243,199,122,.28);
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .arms { animation: none; }
}

.wordmark {
  font: 300 28px/1.2 "Unbounded", "Manrope", sans-serif;
  letter-spacing: .32em;
  margin: 0 0 8px;
  padding-left: .32em; /* compensa o espaçamento da última letra */
}

.tagline { margin: 0; color: var(--text-2); font-size: 16px; }
.note { margin: 6px 0 0; color: var(--text-2); font-size: 13px; opacity: .85; }

.footer {
  border-top: 1px solid var(--line);
  padding: 16px;
  text-align: center;
  font-size: 13px;
}

/* Páginas de texto (privacidade) */
.doc {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 16px 56px;
}

.doc .back { font-size: 13px; }
.doc h1 { font-weight: 500; font-size: 1.6rem; margin: 20px 0 4px; }
.doc h2 { font-weight: 500; font-size: 1.1rem; margin-top: 2rem; color: var(--star); }
.doc p, .doc li { color: var(--text-2); }
.doc strong { color: var(--star); font-weight: 500; }
.doc .muted { font-size: 13px; opacity: .85; }