:root {
    --roxo-principal: #7114DD;
    --roxo-escuro: #610099;
    --roxo-medio: #A84DFF;
    --roxo-claro: #D299FF;
    --azul-claro: #22D0FF;
    --laranja: #FFA300;
    --bege: #FBEDDC;

    --cor-primaria: var(--roxo-principal);
    --cor-secundaria: var(--azul-claro);
    --cor-destaque: #2e86de;
    --cor-fundo: #f9f9f9;
    --cor-texto: #333;
}

body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: #fff;
    color: var(--cor-texto);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Títulos globais */
h1, h2, h3 {
    color: var(--cor-primaria);
    margin-bottom: 15px;
}

/* Botões padrão */
button,
.btn-principal {
    background-color: var(--cor-destaque);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover,
.btn-principal:hover {
    background-color: #1c5db6;
}

/* Formulários padrão */
form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0,0,0,0.05);
    max-width: 700px;
    margin-top: 20px;
}

form input[type="text"],
form input[type="email"],
form input[type="url"],
form input[type="tel"],
form input[type="file"],
form select,
form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    max-width: 600px; /* limite opcional */
}

/* Ajuste para o form em si */
form {
    padding-right: 20px;
}

form textarea {
    resize: vertical;
}

/* Footer */
footer {
    background-color: var(--roxo-escuro);
    color: #fff;
    text-align: center;
    padding: 20px;
}

footer a {
    color: var(--azul-claro);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

/* Links */
a {
    color: var(--cor-primaria);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    button, .btn-principal {
        width: 100%;
    }
}