/* ==========================================================================
   TEMA — base visual de todo o site
   ==========================================================================

   O QUE E ESTE ARQUIVO
   --------------------
   Os tokens e as primitivas que todas as paginas usam, mais o menu e o footer
   (que aparecem em quase todas). Foi extraido do css/index.css depois que o
   desenho da home foi aprovado, para as outras paginas consumirem a MESMA
   fonte de verdade em vez de cada uma repetir cores na mao - que e exactamente
   como o style.css chegou a 113 cores distintas e 1300 !important.

   COMO ELE GANHA DA CASCATA (e por que quase nao tem !important)
   --------------------------------------------------------------
   Quase toda pagina do projeto tem um `<style>` proprio no <head>, DEPOIS do
   <link> do style.css. Entao um `.login-box { ... }` escrito aqui perderia
   para o `.login-box { ... }` da propria pagina, que vem depois com a mesma
   especificidade.

   A saida e especificidade, nao forca:

       .login-box          -> (0,1,0)   o que a pagina tem
       body .login-box     -> (0,1,1)   o que escrevemos aqui: ganha

   E para regras no proprio elemento body (as paginas costumam declarar
   `body { background: #080808 }`):

       body                -> (0,0,1)
       html body           -> (0,0,2)   ganha

   Por isso os seletores daqui sao prefixados. Nao e manha: e a unica forma de
   tematizar sem reescrever 30 arquivos de uma vez. Onde houver `!important` e
   porque a regra original tambem usa, e ai nao ha especificidade que resolva.

   ORDEM DE CARREGAMENTO ESPERADA
   ------------------------------
       style.css           (legado, 9442 linhas)
       css/tema.css        (este)
       css/<pagina>.css    (index, auth, painel, admin)
       <style> da pagina   (legado, ainda ganha em regra de elemento)
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
    /* fundo, em camadas */
    --aa-bg: #070709;
    --aa-surface: #0d0e12;
    --aa-surface-2: #13151b;
    --aa-line: rgba(255, 255, 255, 0.08);
    --aa-line-strong: rgba(255, 255, 255, 0.16);

    /* marca e acentos */
    --aa-cyan: #22e5fa;
    --aa-violet: #7c5cff;
    --aa-cyan-glow: rgba(34, 229, 250, 0.35);
    --aa-violet-glow: rgba(124, 92, 255, 0.3);

    /* estados */
    --aa-ok: #32d583;
    --aa-aviso: #ffab2e;
    --aa-erro: #ff5c7a;
    --aa-discord: #5865f2;

    /* texto */
    --aa-text: #f3f6f8;
    --aa-text-dim: #a6b0bb;
    --aa-text-faint: #6b7682;

    /* escala de espaco (4px) */
    --aa-2: 8px;
    --aa-3: 12px;
    --aa-4: 16px;
    --aa-5: 24px;
    --aa-6: 32px;
    --aa-7: 48px;
    --aa-8: 64px;
    --aa-9: 96px;

    /* chanfro: a assinatura do tema */
    --aa-cut: 14px;
    --aa-cut-sm: 10px;

    --aa-shadow-cyan: 0 14px 40px rgba(34, 229, 250, 0.18);
    --aa-shadow-forte: 0 18px 50px rgba(0, 0, 0, 0.55);

    --aa-fast: 160ms cubic-bezier(.2, .7, .3, 1);
    --aa-mid: 280ms cubic-bezier(.2, .7, .3, 1);

    --aa-display: 'Chakra Petch', 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
}

/* chanfro reaproveitavel: o mesmo poligono em toda parte */
.aa-chanfro,
body .aa-chanfro {
    border-radius: 0;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
}

/* ------------------------------------------------------------------ base -- */
html body {
    background: var(--aa-bg);
    color: var(--aa-text);
}

/* ------------------------------------------------- fundo da pagina -------- */
/* O index ganhou grade fina + brilho duotono, mas ancorados na
   `.banner-section` - que só existe lá. O resto do site ficava com o #070709
   chapado. Aqui a mesma receita vira tratamento de topo do documento, valendo
   em qualquer página que carregue este arquivo.

   Duas exclusões, ambas por já desenharem o próprio fundo - sem elas os
   brilhos somariam e o topo ficaria lavado:

     .page-index  o index desenha na `.banner-section`
     .page-auth   login, cadastro, esqueci e redefinir desenham no container
                  de 100vh (css/auth.css); são telas isoladas, sem menu nem
                  footer, e por isso o brilho delas cobre a viewport inteira
                  em vez de ser tratamento de topo

   Os pseudos do <body> estavam livres - 0 ocorrências de body::before e
   body::after em todo o static/. O z-index negativo os mantém atrás do
   conteúdo e acima do fundo do canvas, o que evita ter de tornar o <body>
   `position: relative`: isso reancoraria todo filho absoluto dele, e várias
   páginas têm modal e dropdown posicionados contra o viewport.

   A geometria difere do index em dois pontos, os dois por causa da moldura:

   1. Deslocamento vertical. No index o hero começa depois do menu, então o
      pico do brilho em `8%` aparece inteiro. Aqui a camada começa em `top: 0`,
      atrás da barra de 70px, e um pico em 8% ficaria escondido justamente
      onde é mais forte. O centro do ciano desceu para 16%.

   2. Como a camada termina. No index o brilho violeta fica em `at 82% 100%`,
      com o pico exatamente na borda de baixo - e lá isso passa, porque a borda
      é o fim da `.banner-section`, que tem `border-bottom` e divide duas
      seções: o corte parece proposital.

      Aqui não há divisa nenhuma: a camada acaba no meio do conteúdo. Com o
      pico do violeta na borda, o degradê era cortado no ponto mais intenso e
      desenhava uma emenda horizontal bem visível do lado direito (82% da
      largura é onde o violeta está forte). Duas correções:

        - o pico saiu da borda e foi para dentro (`at 84% 48%`)
        - a camada ganhou máscara vertical, então ela morre no fundo da página
          em vez de terminar numa reta

      A máscara é o que de fato resolve: sem ela, qualquer gradiente que ainda
      tenha cor na linha de corte volta a marcar. */
body:not(.page-index):not(.page-auth)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 860px;
    z-index: -2;
    background:
        radial-gradient(60% 70% at 50% 16%, var(--aa-cyan-glow) 0%, transparent 62%),
        radial-gradient(42% 46% at 84% 48%, var(--aa-violet-glow) 0%, transparent 72%);
    opacity: 0.5;
    /* o fade começa em 40% (~344px) e só zera em 92% (~791px), bem antes dos
       860px de altura: na linha de corte não resta cor nenhuma para marcar */
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%);
    pointer-events: none;
}

body:not(.page-index):not(.page-auth)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* mesma altura do brilho, de propósito: se as duas camadas acabassem em
       alturas diferentes, cada uma marcaria a sua linha */
    height: 860px;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    /* mesma máscara do index: a grade desvanece nas bordas em vez de virar
       papel de parede quadriculado. Os raios são percentuais, então ela
       acompanha a altura: zera por volta de 776px, antes dos 860px. */
    mask-image: radial-gradient(75% 65% at 50% 35%, #000 20%, transparent 85%);
    -webkit-mask-image: radial-gradient(75% 65% at 50% 35%, #000 20%, transparent 85%);
    pointer-events: none;
}

/* O `.container` é invólucro de layout - centraliza e limita a 1280px - mas o
   `style.css:11` também o pintava com `background: #080808`, que era o fundo
   antigo da página. Com o fundo novo em #070709, ele virava uma coluna central
   um ponto mais clara que as bordas: quase imperceptível isolado, bem visível
   como retângulo de 1280px contra o resto da tela.
   
   A correção não é igualar a cor, é parar de pintar: quem desenha o fundo é a
   página, e invólucro de layout não precisa de superfície. Igualar só mudaria
   o número que vai divergir na próxima vez.

   O !important é necessário: as 7 páginas de detalhe repetem um bloco no
   <body> com `.container { background: #080808 !important }`. Sem ele, o
   retângulo voltaria justamente lá. */
body .container {
    background: transparent !important;
    border-radius: 0;
}

/* --------------------------------------------- respiro embaixo do menu --- */
/*
   O menu e' `position: sticky` com 70px (60px no mobile). Sendo sticky e nao
   fixed, ele ocupa espaco no fluxo - o conteudo nao fica POR BAIXO dele. Mas
   tambem nao sobra folga: o `.container` tem `margin: 0 auto` e `margin-top:
   0`, e o menu tem uma linha de brilho em `bottom: -1px`. Resultado: o
   primeiro titulo da pagina encosta nessa linha.

   Cada pagina resolvia isso por conta propria, com valores diferentes (a de
   saldo somava 140px entre dois seletores). As que nao resolviam ficavam
   coladas.

   A regra vale para o PRIMEIRO elemento depois do menu, e so para ele: usar
   `.container` pegaria tambem os aninhados, e dar padding no body somaria com
   o que cada pagina ja faz.

   DUAS EXCECOES, pelas mesmas classes que o fundo global usa:
     .page-index - o banner cola no menu de proposito, e' o topo da home
     .page-auth  - o container ocupa 100vh e se centraliza sozinho
*/
/*
   O ALVO E' O CONTAINER, NAO "O QUE VEM DEPOIS DO MENU".

   A primeira versao desta regra usava `.main-menu + *`, e nao funcionou: o
   menu.html nao termina no `</nav>`: depois dele vem um <script>, um <style>
   e outro <script>. O `+` pega o irmao IMEDIATO, que era o <script> - e
   margem em elemento `display: none` nao move nada. A pagina continuava
   encostada, com a regra aparentemente certa.

   Mirar `> .container` e' previsivel: e' o involucro que as paginas usam, e
   filho direto do body. As paginas com involucro proprio (perfil, termos,
   feedbacks) nao entram aqui - e nao precisam, todas ja definem o proprio
   topo.

   SEM `:where()`, e isso foi uma correcao.

   A tentativa anterior envolvia a regra num `:where()` para ter
   especificidade 0 e nao atropelar pagina nenhuma. Mas aí ela perdia do
   proprio `.container` do style.css:

       .container { margin: 0 auto; ... margin-top: 0 }

   que e' justamente quem zera o topo. Uma regra que perde de quem ela precisa
   corrigir nao corrige nada.

   Entao a especificidade e' maior de proposito (3 classes), e o efeito
   colateral e' conhecido e aceito: as paginas cujo involucro e' `.container`
   passam a ter o MESMO respiro de 32px, em vez de cada uma com o seu. E' o
   que se quer - consistencia.

   Quem tem involucro proprio (perfil, termos, privacy, feedbacks, error) nao
   e' afetado: o seletor exige `.container`, e essas paginas nao usam.

   DUAS EXCECOES, pelas mesmas classes que o fundo global usa:
     .page-index - o banner cola no menu de proposito, e' o topo da home
     .page-auth  - o container ocupa 100vh e se centraliza sozinho
*/
body:not(.page-index):not(.page-auth) > .container {
    margin-top: var(--aa-6);
}

@media (max-width: 768px) {
    /* O menu encurta para 60px no mobile, e a tela e' mais estreita: o mesmo
       respiro em proporcao fica grande demais e empurra o conteudo para fora
       da primeira dobra. */
    body:not(.page-index):not(.page-auth) > .container {
        margin-top: var(--aa-5);
    }
}

/* Foco de teclado. Nao existia em nenhuma das 9442 linhas do style.css
   (0 ocorrencias de :focus-visible): quem navega por Tab nao via onde estava.
   :focus-visible so aparece para teclado, entao o clique de mouse continua
   sem anel. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible {
    outline: 2px solid var(--aa-cyan);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ------------------------------------------------- primitivas de titulo --- */
/* Cabeca de secao: etiqueta numerada + titulo + regua. O mesmo padrao do
   index, agora disponivel para as outras paginas. */
body .aa-head {
    display: flex;
    align-items: baseline;
    gap: var(--aa-4);
    margin-bottom: var(--aa-6);
}

body .aa-eyebrow {
    flex: none;
    font-family: var(--aa-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--aa-cyan);
    white-space: nowrap;
}

body .aa-head .aa-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--aa-line-strong), transparent);
    transform: translateY(-4px);
}

body .aa-titulo {
    font-family: var(--aa-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--aa-text);
    margin: 0;
}

/* ------------------------------------------------- primitivas de painel --- */
body .aa-painel {
    background: linear-gradient(160deg, var(--aa-surface-2) 0%, var(--aa-surface) 70%);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
    padding: var(--aa-5);
}

/* ------------------------------------------------- primitivas de botao ---- */
body .aa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-2);
    font-family: var(--aa-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--aa-3) var(--aa-6);
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
    transition: transform var(--aa-fast), box-shadow var(--aa-fast),
                background var(--aa-fast), border-color var(--aa-fast);
}

body .aa-btn-primario {
    background: linear-gradient(135deg, var(--aa-cyan) 0%, #5af0ff 100%);
    color: #04161a;
}

body .aa-btn-primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px var(--aa-cyan-glow);
}

body .aa-btn-fantasma {
    background: rgba(255, 255, 255, 0.03);
    color: var(--aa-text);
    border-color: var(--aa-line-strong);
}

body .aa-btn-fantasma:hover {
    background: rgba(34, 229, 250, 0.08);
    border-color: var(--aa-cyan);
    transform: translateY(-2px);
}

body .aa-btn:disabled,
body .aa-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ------------------------------------------------ primitivas de formulario */
body .aa-campo {
    width: 100%;
    padding: var(--aa-3) var(--aa-4);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--aa-line-strong);
    border-radius: 0;
    color: var(--aa-text);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color var(--aa-fast), background var(--aa-fast),
                box-shadow var(--aa-fast);
}

body .aa-campo:focus {
    outline: none;
    border-color: var(--aa-cyan);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(34, 229, 250, 0.15);
}

body .aa-campo::placeholder {
    color: var(--aa-text-faint);
}

body .aa-rotulo {
    display: block;
    margin-bottom: var(--aa-2);
    font-family: var(--aa-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aa-text-dim);
}

/* ------------------------------------------------- primitivas de estado --- */
body .aa-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--aa-2);
    font-family: var(--aa-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}

body .aa-selo-ok { color: var(--aa-ok); background: rgba(50, 213, 131, 0.1); }
body .aa-selo-aviso { color: var(--aa-aviso); background: rgba(255, 171, 46, 0.1); }
body .aa-selo-erro { color: var(--aa-erro); background: rgba(255, 92, 122, 0.1); }
body .aa-selo-neutro { color: var(--aa-text-faint); background: rgba(255, 255, 255, 0.04); }

/* ======================================================================== */
/* MENU                                                                      */
/* ======================================================================== */
/* O menu.html tem CSS critico inline (contra FOUC) com !important em tudo, e
   esse bloco fica no <body> - ou seja, vence qualquer folha externa por ordem
   de documento. O basico do menu por isso foi reescrito LA, com tokens.
   Aqui ficam as partes que moram no style.css: os dropdowns de perfil e de
   saldo, que o inline nao cobre. */

body .user-balance-trigger,
body .user-profile-trigger {
    border: 1px solid var(--aa-line-strong);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut-sm) 0, 100% 0, 100% calc(100% - var(--aa-cut-sm)),
                       calc(100% - var(--aa-cut-sm)) 100%, 0 100%, 0 var(--aa-cut-sm));
    background: rgba(255, 255, 255, 0.03);
    transition: background var(--aa-fast), border-color var(--aa-fast);
}

body .user-balance-trigger:hover,
body .user-profile-trigger:hover {
    background: rgba(34, 229, 250, 0.08);
    border-color: var(--aa-cyan);
}

body .balance-amount {
    font-family: var(--aa-display);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--aa-cyan);
}

body .username {
    font-family: var(--aa-display);
    font-weight: 600;
    letter-spacing: 0.04em;
}

body .balance-dropdown-menu,
body .dropdown-menu {
    background: var(--aa-surface-2);
    border: 1px solid var(--aa-line-strong);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut-sm) 0, 100% 0, 100% calc(100% - var(--aa-cut-sm)),
                       calc(100% - var(--aa-cut-sm)) 100%, 0 100%, 0 var(--aa-cut-sm));
    box-shadow: var(--aa-shadow-forte);
}

body .balance-dropdown-header,
body .dropdown-header {
    border-bottom: 1px solid var(--aa-line);
}

body .balance-dropdown-title,
body .dropdown-title {
    font-family: var(--aa-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--aa-cyan);
}

body .balance-dropdown-item:hover,
body .dropdown-item:hover {
    background: rgba(34, 229, 250, 0.1);
    color: var(--aa-cyan);
}

body .dropdown-item.logout:hover {
    background: rgba(255, 92, 122, 0.12);
    color: var(--aa-erro);
}

body .dropdown-username {
    font-family: var(--aa-display);
    font-weight: 600;
}

body .dropdown-balance {
    font-family: var(--aa-display);
    font-weight: 700;
    color: var(--aa-cyan);
}

body .avatar,
body .dropdown-user-avatar img {
    border: 1px solid var(--aa-line-strong);
}

/* ======================================================================== */
/* FOOTER                                                                    */
/* ======================================================================== */
/* Como no menu, o footer.html traz o CSS inline no <body>. Lá ele foi
   reescrito com tokens; aqui fica só o que depende de estado/hover que vale
   reforçar, para o caso de o style.css ter regra concorrente. */

body .main-footer {
    background: var(--aa-surface);
    border-top: 1px solid var(--aa-line);
}

body .footer-title {
    font-family: var(--aa-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

body .footer-link:hover {
    color: var(--aa-cyan);
}

/* ------------------------------------------------------------- revelacao -- */
/* O tema antigo punha opacity:0 em cards e dependia do IntersectionObserver
   para revelar. Sem JS, o conteudo nunca aparecia. Aqui o estado invisivel so
   existe quando o JS anuncia que esta vivo (classe .aa-js no <html>, posta
   por um script no <head>). */
html:not(.aa-js) body .stat-card,
html:not(.aa-js) body .feature-row,
html:not(.aa-js) body .purchase-card,
html:not(.aa-js) body .history-item {
    opacity: 1;
    transform: none;
}

/* quem pediu menos animacao no sistema recebe menos animacao */
@media (prefers-reduced-motion: reduce) {
    body *,
    body *::before,
    body *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}