/* ==========================================================================
   VARIÁVEIS GLOBAIS (DESIGN SYSTEM)
   ========================================================================== */
:root {
    --cor-primaria: #6366f1;
    --cor-secundaria: #4f46e5;
    --cor-escura: #1e1b4b;
    --cor-clara: #f8fafc;
    --fonte-principal: 'Inter', sans-serif;
    --transicao-suave: all 0.3s ease;
}

/* ==========================================================================
   CLASSES UTILITÁRIAS GLOBAIS
   ========================================================================== */

/* Efeito de Sombra Global */
.sombra-suave {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Centralizador Flexbox */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Botão Customizado Via Código */
.btn-custom {
    background-color: var(--cor-primaria);
    color: var(--cor-clara);
    padding: 12px 24px;
    border-radius: 8px;
    transition: var(--transicao-suave);
    text-decoration: none;
    display: inline-block;
}

.btn-custom:hover {
    background-color: var(--cor-secundaria);
    transform: translateY(-2px);
}