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

button, .btn, a.btn {
    background-color: var(--color-primary);
    color: var(--color-text-contrast);
    border: 2px solid var(--color-primary);
    padding: var(--button-padding-y) var(--button-padding-x);
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 0;  /* Sharp edges */
}

button:hover, .btn:hover {
    background-color: var(--color-bg);
    color: var(--color-primary);
}

button:active, .btn:active {
    background-color: var(--color-primary);
    color: var(--color-text);
    border-color: var(--color-text);
}

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: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    text-decoration: none;
}

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

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