/* ============================================================
   base.css — fundação visual compartilhada (família "Pública")
   Carregado ANTES do CSS específico de cada página.
   Para mudar a identidade do site (cores, fonte, raio, sombra),
   altere os tokens em :root abaixo — vale para todas as páginas
   que estendem templates/base.html.
   ============================================================ */

:root {
    /* Marca */
    --brand:    #e8522a;
    --brand-d:  #bf3d17;

    /* Tons neutros / texto */
    --dark:     #1a1a1a;
    --mid:      #2e2e2e;
    --muted:    #6b6b6b;
    --border:   #d8d8d8;
    --bg:       #f4f3f0;
    --white:    #ffffff;

    /* Estados */
    --ok:       #2e7d32;
    --err:      #c62828;
    --warn:     #b8860b;

    /* Forma */
    --radius:     8px;   /* campos, botões, caixas pequenas */
    --radius-lg:  14px;  /* cards, containers principais */
    --shadow:     0 4px 20px rgba(0,0,0,.10);

    /* Tipografia */
    --font-body: 'Barlow', Arial, sans-serif;
    --font-head: 'Barlow Condensed', sans-serif;
}

/* Reset ------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base do documento ----------------------------------------- */
body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--dark);
    line-height: 1.6;
}

/* Utilitários compartilhados ------------------------------- */
/* Sem !important de propósito: várias telas alternam visibilidade
   via element.style.display no JS. Páginas que precisam da versão
   forte mantêm seu próprio ".hidden { display: none !important }". */
.hidden {
    display: none;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Rodapé padrão do site público — barra escura, discreta.
   Uma linha de texto (frase bíblica ou aviso de direitos). */
.footer {
    background: var(--dark);
    padding: 10px 0;
    text-align: center;
    border-top: 3px solid var(--brand);
}

.bible-verse,
.footer-text {
    font-size: 0.8em;
    color: rgba(255,255,255,.75);
    margin: 5px 0;
}

.bible-verse {
    font-style: italic;
}