/*
 * 10-base.css — A aparência padrão das tags HTML, usando os tokens.
 * Ponto de partida do time de design. Pode (e deve) mudar!
 */

body {
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
    font-size: var(--texto-m);
}

h1,
h2,
h3 {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    line-height: 1.1;
}

h1 { font-size: var(--texto-xg); }
h2 { font-size: var(--texto-gg); }
h3 { font-size: var(--texto-g); }

a {
    color: var(--cor-link);
    text-underline-offset: 0.2em;
}

/* Estrutura da página */
main  {
 padding: var(--espaco-2);
}



/* Mensagens do Rails (flash) */
.notice:not(:empty),
.alert:not(:empty) {
    padding: var(--espaco-1) var(--espaco-2);
    border-radius: var(--raio);
    margin-block: var(--espaco-2);
}
.notice:not(:empty) { background: var(--cor-sucesso); color: var(--cor-branco); }
.alert:not(:empty)  { background: var(--cor-erro);    color: var(--cor-branco); }

/* Formulários */
form {
    display: grid;
    gap: var(--espaco-2);
    max-width: 28rem;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: var(--espaco-1);
    border: 2px solid var(--cor-roxo);
    border-radius: var(--raio);
    background: var(--cor-branco);
}

form label {
    display: block;
}

/* Caixa de marcar e o rótulo dela ficam na mesma linha */
input[type="checkbox"] + label {
    display: inline;
}

button,
input[type="submit"] {
    justify-self: start;
    padding: var(--espaco-1) var(--espaco-3);
    border: 0;
    border-radius: var(--raio);
    background: var(--cor-roxo);
    color: var(--cor-branco);
    font-weight: 700;
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
    background: var(--cor-laranja-escuro);
}

/* Foco visível: quem navega pelo teclado precisa ver onde está */
:focus-visible {
    outline: 3px solid var(--cor-laranja);
    outline-offset: 2px;
}

/* Botão "Entrar com o Google": cores das regras de marca do Google */
.botao-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-1);
    justify-self: stretch;          /* ocupa toda a largura do formulário */
    width: 100%;
    min-height: 3rem;               /* 48px: área de toque confortável no celular */
    background: #ffffff;
    color: #1f1f1f;
    border: 1px solid #747775;
    font-size: var(--texto-m);
    font-weight: 600;
}

.botao-google:hover {
    background: #f2f2f2;
}

/* Linha com "ou" no meio, separando o Google do formulário */
.divisor {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    max-width: 28rem;
    margin-block: var(--espaco-3);
    font-size: var(--texto-p);
}

.divisor::before,
.divisor::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--cor-roxo);
    opacity: 0.3;
}

.texto-longo {
    max-width: 40rem;
    line-height: 1.6;
}