/* ======================= Estilos de Componentes UI ======================= */

/* Estilos Base para Botões */
.btn {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5); /* 10px 20px */
    font-family: var(--font-primary);
    font-size: var(--font-size-small); /* 14px */
    font-weight: 700; /* Negrito */
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius-medium); /* 6px */
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    white-space: nowrap; /* Evita quebra de linha */
}

.btn:hover,
.btn:focus {
    text-decoration: none; /* Remove sublinhado padrão */
}

/* Botão Primário (Ex: Demonstração) */
.btn-primary {
    background-color: var(--color-secondary); /* #0078cf */
    color: var(--color-background); /* Branco */
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary); /* #20365f */
    color: var(--color-background);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra suave no hover */
}

/* Botão Secundário (Ex: Área de Login) */
.btn-secondary {
    background-color: transparent;
    color: var(--color-secondary); /* #0078cf */
    border: 2px solid var(--color-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-highlight-soft); /* #e6f7ff */
    color: var(--color-primary); /* Azul Marinho para contraste */
    border-color: var(--color-secondary); /* Mantém a cor da borda ou ajusta se necessário */
}

/* Adicionar estilos para outros componentes (Cards, Formulários) aqui posteriormente */

/* Estilos para Cards (Exemplo inicial baseado no prompt) */
.card {
    background-color: var(--color-background);
    border-radius: var(--border-radius-large); /* 8px */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: calc(var(--spacing-unit) * 2.5); /* 20px */
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.card:hover {
    transform: translateY(-5px); /* Efeito de elevação */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Estilos para Formulários (Exemplo inicial) */
.form-group {
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-unit); /* 8px */
    font-weight: 600;
    color: var(--color-primary);
}

.form-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.25); /* 10px */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-small); /* 4px */
    font-size: var(--font-size-p);
    transition: border-color var(--transition-speed) ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px var(--color-highlight-soft);
}

/* Adicionar mais estilos de componentes conforme necessário */