/* ============================================================= */
/* sportclima — style-login.css                                   */
/* estilos específicos da página de login com dark mode oled      */
/* ============================================================= */


/* ----------------------------------------------------------- */
/* variáveis de cor da página de login                         */
/* ----------------------------------------------------------- */
:root {
    --primary:       #f27f0d;
    --background:    #f8f7f5;
    --on-background: #241912;
    --surface-low:   #f8f7f5;
    --surface-1:     #121212;
    --surface-2:     #1c1c1c;
    --surface-3:     #252525;
}


/* ----------------------------------------------------------- */
/* base: fonte e transições                                    */
/* ----------------------------------------------------------- */
body {
    font-family: 'Lexend', sans-serif;
}

/* transição suave global para mudanças de tema */
*, *::before, *::after {
    transition: background-color 0.25s ease, color 0.2s ease, border-color 0.25s ease;
}

/* material symbols: configuração padrão */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* ----------------------------------------------------------- */
/* utilitários de input para o formulário                      */
/* ----------------------------------------------------------- */
.input-field {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border-radius: 0.75rem;
    border: none;
    background-color: var(--surface-low);
    color: var(--on-background);
    transition: all 0.2s;
    outline: none;
}

.input-field:focus {
    box-shadow: 0 0 0 2px rgba(242, 127, 13, 0.2);
    background-color: white;
}

/* inputs no modo escuro */
.dark .input-field {
    background-color: var(--surface-2);
    color: #f1f5f9;
}

.dark .input-field:focus {
    background-color: var(--surface-3);
    box-shadow: 0 0 0 2px rgba(242, 127, 13, 0.25);
}


/* ----------------------------------------------------------- */
/* botão principal de ação (login)                             */
/* ----------------------------------------------------------- */
.btn-primary {
    width: 100%;
    background-color: var(--primary);
    color: white;
    padding: 1rem;
    border-radius: 0.75rem;
    font-weight: bold;
    font-size: 1.125rem;
    transition: all 0.2s;
    box-shadow: 0 10px 15px -3px rgba(242, 127, 13, 0.2);
}

.btn-primary:hover {
    background-color: #ea7400;
}

.btn-primary:active {
    transform: scale(0.98);
}

/* sombra mais intensa no dark para dar profundidade */
.dark .btn-primary {
    box-shadow: 0 10px 30px -3px rgba(242, 127, 13, 0.35);
}


/* ----------------------------------------------------------- */
/* rodapé legal do formulário de login                         */
/* ----------------------------------------------------------- */
.footer-legal {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.footer-legal a:hover {
    color: var(--primary);
}


/* ----------------------------------------------------------- */
/* dark mode — overrides específicos do login                  */
/* ----------------------------------------------------------- */

/* fundo preto oled no corpo */
.dark body {
    background-color: #0a0a0a !important;
    color: #f1f5f9 !important;
}

/* painel branco do formulário usa surface-1 no escuro */
.dark .bg-white {
    background-color: var(--surface-1) !important;
}

/* textos secundários no formulário dark */
.dark .text-slate-500 {
    color: #71717a !important;
}

.dark .text-slate-400 {
    color: #52525b !important;
}

/* seção de imagem: overlay mais escuro no dark */
.dark section::after {
    background: linear-gradient(to top, rgba(0,0,0,0.92), transparent);
}