/**
 * Buttons — assets/css/buttons.css
 * Reusable button styles used across all templates.
 *
 * @package  DEI4SME
 * @used-in  Any template with .btn elements (front-page.php tool cards, page-tool-*.php forms)
 *
 * SELECTORS:
 *   .btn          — Base button (inline-block, 10px 20px padding, 15px, rounded, no border)
 *   .btn-primary  — Filled primary button (--color-primary bg, white text)
 *   .btn-outline  — Outlined primary button (transparent bg, 2px --color-primary border)
 */

/* === Buttons === */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    text-align: center;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-primary-light);
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
}

.btn-secondary {
    background: var(--color-bg-alt, #f0f0f0);
    color: var(--color-primary);
    border: 2px solid var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn-text {
    background: transparent;
    color: var(--color-primary);
    padding: 6px 12px;
    font-size: 14px;
    text-decoration: underline;
}

.btn-text:hover {
    color: var(--color-primary-light);
}