/*
 * Identidade visual da Astrofala - fonte unica da paleta.
 *
 * As cores saem do site da empresa (Website/css/custom.css, :root) e os
 * dourados foram amostrados do proprio logotipo. Vive num ficheiro so para a
 * home e o oraculo (e o que vier a seguir) nao divergirem: mudar a marca e
 * mudar aqui.
 *
 * Regra de contraste que vale em todo o lado: dourado SO sobre fundo escuro.
 * Sobre branco o dourado claro fica em 2,5:1; em fundo claro usa-se
 * --af-gold-deep, que passa AA.
 */

:root {
    --af-night:        #010535;
    --af-night-2:      #0a1150;
    --af-night-3:      #151d6b;
    --af-blue:         #1956C1;
    --af-blue-light:   #3577C2;

    --af-gold:         #B9A04E;
    --af-gold-bright:  #DEC460;
    --af-gold-pale:    #F4ECC8;
    --af-gold-deep:    #7d6230;

    /*
     * NAO HA VIOLETA NESTA PALETA, E E DE PROPOSITO.
     *
     * O violeta do ceu do heroi (#4A2A8C) chegou a ser acrescentado aqui, e o
     * Wagner corrigiu: nao e cor da marca. A identidade da Astrofala e
     * azul-noite mais dourado, e continua a ser so isso.
     *
     * Onde o violeta aparece - o fundo do heroi, o degrade dos banners de
     * desbloqueio, os circulos dos arcanos - e decoracao, e a cor esta
     * declarada em cada um desses sitios. Quem vier acrescentar violeta a um
     * componente novo deve pensar duas vezes antes de o fazer, e nao apanha-lo
     * de graca por estar aqui uma variavel a espera.
     */

    --af-bg:           #FAFAFB;
    --af-surface:      #FFFFFF;
    --af-text:         #5b5b66;
    --af-heading:      #010535;
    --af-divider:      #E6E6EB;
    --af-coral:        #E2403B;

    --af-radius:       20px;
    --af-radius-sm:    12px;
    --af-shadow:       0 1px 2px rgba(1, 5, 53, .04), 0 12px 32px rgba(1, 5, 53, .07);
    --af-shadow-hover: 0 2px 4px rgba(1, 5, 53, .06), 0 20px 48px rgba(1, 5, 53, .14);

    /*
     * As sombras douradas dos botoes.
     *
     * O desenho vem do jornadadamanifestacao.lovable.app, que o Wagner apontou
     * como referencia, com os nossos douradios em vez dos deles. O que se
     * aprende ao ler-lhe o CSS e a estrutura em DUAS camadas:
     *
     *   0 10px 40px -10px  -> a sombra que assenta o botao na pagina
     *   0 0 60px -15px     -> o halo a volta, que so se ve sobre fundo escuro
     *
     * Os raios negativos sao o que impede a sombra de sair por baixo do botao
     * como uma mancha: encolhem-na antes de a desfocar, e o que fica e luz em
     * vez de sujidade.
     *
     * A versao --deitada nao tem halo, e e a que se usa sobre fundo claro: um
     * halo dourado sobre branco nao se le como brilho, le-se como borrao.
     */
    --af-glow-gold:        0 10px 40px -10px rgba(185, 160, 78, .55), 0 0 60px -15px rgba(222, 196, 96, .45);
    --af-glow-gold-hover:  0 14px 46px -10px rgba(185, 160, 78, .7), 0 0 72px -12px rgba(244, 236, 200, .55);
    --af-glow-gold-deitada:       0 10px 28px -10px rgba(185, 160, 78, .5), 0 2px 6px rgba(1, 5, 53, .1);
    --af-glow-gold-deitada-hover: 0 14px 34px -10px rgba(185, 160, 78, .62), 0 2px 8px rgba(1, 5, 53, .14);

    --af-font:         "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --af-font-title:   "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* O metal do logotipo, aplicado ao texto */
.af-gold-text {
    background: linear-gradient(180deg, #FDF9DF 0%, var(--af-gold-bright) 45%, var(--af-gold) 72%, #96733B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* -------------------------------------------------------------- botoes --- */

.af-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .9rem 1.6rem;
    border-radius: 999px;
    font-family: var(--af-font-title);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.af-btn:hover,
.af-btn:focus { text-decoration: none; transform: translateY(-2px); }

.af-btn:focus-visible {
    outline: 3px solid var(--af-gold-bright);
    outline-offset: 3px;
}

/*
 * Dourado sobre azul-noite: 8,9:1.
 *
 * O gradiente tem TRES paragens e nao duas. Com duas, o botao le-se como um
 * retangulo pintado de amarelo; a terceira, mais escura no fim, e o que lhe da
 * a curvatura de metal - e a mesma razao por que o --af-gold-text do logotipo
 * tem quatro.
 *
 * A sombra e a deitada por defeito, porque este botao aparece tanto sobre o
 * ceu do heroi como sobre as seccoes brancas, e sobre branco um halo dourado
 * le-se como borrao. Quem esta sobre fundo escuro ganha o halo mais abaixo.
 */
.af-btn-gold {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #F2E09A 0%, var(--af-gold-bright) 48%, var(--af-gold) 100%);
    color: #2b1f05;
    box-shadow: var(--af-glow-gold-deitada);
}
.af-btn-gold:hover,
.af-btn-gold:focus { color: #2b1f05; box-shadow: var(--af-glow-gold-deitada-hover); }

/*
 * O brilho que varre o botao ao passar o rato.
 *
 * Uma faixa clara e inclinada que atravessa o botao de um lado ao outro. Vive
 * num pseudo-elemento com `pointer-events: none` para nao roubar o clique ao
 * botao, e o `overflow: hidden` da regra de cima e o que a mantem dentro das
 * bordas arredondadas.
 *
 * So se move por `transform`, que corre na placa grafica. A tentacao seria
 * animar a posicao do gradiente, e isso obrigaria a repintar o botao inteiro em
 * cada fotograma da passagem.
 *
 * `hover` e nao `focus`: quem navega por teclado ja tem o anel de foco, e um
 * varrimento de luz a cada tabulacao e ruido.
 */
.af-btn-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255, 255, 255, .55) 48%,
        transparent 64%);
    transform: translateX(-130%);
    transition: transform .75s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.af-btn-gold:hover::after { transform: translateX(130%); }

/* o conteudo do botao fica acima do brilho */
.af-btn-gold > * { position: relative; z-index: 1; }

/*
 * Sobre fundo escuro o botao ganha o halo.
 *
 * A lista de contextos e explicita de proposito. A alternativa seria uma classe
 * `.af-btn-gold--escuro` posta a mao em cada sitio, e isso esquece-se; assim,
 * um botao dourado colocado no heroi ou no CTA acende sozinho.
 */
.af-hero .af-btn-gold,
.af-cta .af-btn-gold,
.af-oraculo-faixa .af-btn-gold,
.af-oraculo .af-btn-gold { box-shadow: var(--af-glow-gold); }

.af-hero .af-btn-gold:hover,
.af-cta .af-btn-gold:hover,
.af-oraculo-faixa .af-btn-gold:hover,
.af-oraculo .af-btn-gold:hover { box-shadow: var(--af-glow-gold-hover); }

/* Quem pede menos movimento nao leva varrimento nenhum - a sombra fica */
@media (prefers-reduced-motion: reduce) {
    .af-btn-gold::after { display: none; }
}

.af-btn-ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.af-btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.af-btn-blue {
    background: var(--af-blue);
    color: #fff;
    box-shadow: 0 8px 24px rgba(25, 86, 193, .28);
}
.af-btn-blue:hover { color: #fff; box-shadow: 0 12px 32px rgba(25, 86, 193, .38); }

.af-btn-lg { padding: 1.05rem 2rem; font-size: 1.0625rem; }