/**
 * Button Component
 * Primary button styles and variants
 */

button, .btn, a.btn {
    background: var(--color-primary);
    color: var(--color-text-contrast);
    border: 1px solid var(--color-primary);
    padding: 0.75em 1.5em;
    font-family: var(--font-family), sans-serif;
    cursor: pointer;
}

button:hover, .btn:hover, a.btn:hover {
    background: var(--color-accent);
    color: var(--color-text);
    border: 1px solid var(--color-accent);
}

button:active, .btn:active, a.btn:active {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
}

a.btn, a.btn:hover, a.btn:active {
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn.btn-accent {
    background-color: var(--color-accent-300);
    border-color: var(--color-accent-300);
    color: var(--color-primary);
    text-decoration: none;
}

.btn.btn-accent:hover {
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    text-decoration: none;
}

.btn.btn-secondary {
    color: var(--color-text);
    background-color: transparent;
    border: 1px solid var(--color-secondary);
    text-decoration: none;
}

.btn.btn-secondary:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-contrast);
    border: 1px solid var(--color-secondary);
    text-decoration: none;
}