/* ==========================================================================
   Tema Star Evasion — preto & branco cósmico. Herdado da identidade do jogo
   (fundo preto, estrelas brancas, ponto que brilha; acentos ciano/verde/
   vermelho do render). Fonte Space Grotesk (a mesma do jogo, SIL OFL).
   É DARK sempre (o jogo é preto). Sobrepõe os tokens do site.css nas páginas
   /starevasion/. Carregar DEPOIS de site.css.
   ========================================================================== */
:root {
  color-scheme: dark;
  --font:         "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);

  --bg:        #07080E; /* espaço profundo (quase preto) */
  --surface:   #101219; /* cards */
  --surface-2: #191C27; /* preenchimentos / chips */
  --line:      #262A38; /* divisórias sutis */
  --ink:       #FFFFFF; /* branco (as estrelas) */
  --ink-soft:  #B8C0D0; /* texto secundário */
  --meta:      #808AA0; /* legendas */

  --accent:        #3FD8F2; /* ciano estelar */
  --accent-strong: #7CE7FA; /* ciano claro (texto/links/eyebrow no escuro) */
  --coral:         #FF5C5C; /* perigo / morte */
  --success:       #4FE07A; /* raspão / near-miss */
  --brand-red:     #FF5C5C;
  --ok:            #4FE07A;

  /* botão primário: branco sólido + tinta escura (contraste no preto) */
  --btn-bg: #FFFFFF;
  --btn-fg: #07080E;

  --shadow:    0 24px 60px -30px rgba(0, 0, 0, .85);
  --shadow-sm: 0 10px 28px -18px rgba(0, 0, 0, .75);
  --radius:    3px;   /* HUD anguloso — combina com o jogo (nada de fofo) */
  --radius-sm: 2px;
}

/* Títulos e marca na fonte do jogo */
h1, h2, h3, .brand b { font-family: var(--font-display); letter-spacing: -.01em; }

/* Botão primário precisa de override: no dark, var(--ink) é branco */
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: #DCEAF0; }

/* Estrelinha no header/acento pode brilhar levemente */
.brand b { letter-spacing: .01em; }

/* Fundo tipo o jogo: o canvas de estrelas (starfield.js) fica fixo atrás de
   tudo; o conteúdo é transparente e os cards viram "vidro" cósmico. */
body { background: #050609; }
.card { background: rgba(9, 11, 15, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .15); border-radius: 3px; }
.site-header { background: color-mix(in srgb, #050609 78%, transparent); }
/* Texto longo (privacy/support) num painel translúcido — legível sobre o
   starfield, com as estrelas aparecendo nas margens. */
.doc {
  position: relative;
  background: rgba(6, 7, 11, .68);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3px;
  padding: clamp(30px, 5vw, 52px) clamp(20px, 4vw, 44px);
  margin: 40px auto;
}