@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

:root {
    --cor-primaria-1: #000807;
    --cor-primaria-2: #A2A3BB;
    --cor-primaria-3: #9395D3;
    --cor-primaria-4: #B3B7EE;
    --cor-bg: #FBF9FF;

    --cor-branco: #fff;
    --cor-preto: #1d1d1d;
    --cor-sombra: #0e004b7e (0, 0, 0, 0.15);
    --cor-texto: #333;

    --fonte: "Caveat", cursive;

    --raio: 12px;
    --transition: 0.3s ease;

}

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

body {
    font-family: var(--fonte);
    background: #7315e6;
    background: radial-gradient(circle, rgba(115, 21, 230, 1) 0%, rgba(46, 0, 0, 1) 51%, rgba(12, 4, 31, 1) 100%);
    ;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;

    .container {
        background: var(--cor-branco);
        padding: clamp(2rem, 5vh, 3rem);
        border-radius: var(--raio);
        box-shadow: 0 8px 24px var(--cor-sombra);
        width: 100%;
        max-width: 400px;
        text-align: center;
    }

    #logo {
        width: 150px;
        height: auto;
        margin-bottom: 20px;
        border-radius: var(--raio);
    }

    .titulo {
        font-size: clamp(1.5rem, 2vm + 1rem, 2rem);
        color: var(--cor-texto);
        margin-bottom: 1.5rem;
        font-weight: 500;

    }

    input {
        width: 100%;
        padding: 14px;
        margin: 10px 0;
        border: 1px, solid var(--cor-preto);
        border-radius: var(--raio);
        font-size: 1rem;
        transition: var(--transition);
    }

    input.focus {
        border-color: var(--cor-primaria-3);
        outline: none;
        box-shadow: 0 0 0 3px rgba(107, 115, 255, 0.25);
    }

    .botoes {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }

    button {
        padding: 12px;
        font-size: 1rem;
        font-weight: 500;
        border: none;
        border-radius: var(--raio);
        background-color: var(--cor-primaria-4);
        color: var(--cor-branco);
        cursor: pointer;
        transition: var(--transition);
    }

    button.hover{
        background-color: var(--cor-primaria-3);
    }

    @media (max-width: 360px) {
        .container {
            padding: 1.5rem;
        }
    }

    input, button {
        font-size: 0.95rem;
    }

    button[onclick="logout()"] {
        align-self: flex-end;
        margin-bottom: 1.5rem;
        background-color: var(--cor-primaria-3);
        color: var(--cor-branco);
        padding: 10px 16px;
        border: none;
        border-radius: var(--raio);
        cursor: pointer;
        font-weight: 500;
        transition: var(--transition);
    }
}

button[onclick="logout()"] :hover {
    background-color: var(--cor-primaria-2);
}