/**
 * Button Component
 * Primary button styles and variants
 *
 * Hierarchy:
 *   .btn (default)         — solid green primary, accent hover
 *   .btn.btn-secondary     — orange outline, fills orange on hover (ghost)
 *   .btn.btn-secondary-filled — solid orange, lighter orange on hover
 *   .btn.btn-accent        — light green bg, primary text
 */

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;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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;
}

/* ── Accent: light green background, green text ── */

.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 {
    background-color: var(--color-accent-400);
    border-color: var(--color-accent-400);
    color: var(--color-primary);
    text-decoration: none;
}

.btn.btn-accent:active {
    background-color: var(--color-accent-300);
    border-color: var(--color-accent-300);
}

/* ── Secondary (ghost): transparent, orange border ── */

.btn.btn-secondary {
    color: var(--color-secondary);
    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-color: var(--color-secondary);
    text-decoration: none;
}

.btn.btn-secondary:active {
    background-color: var(--color-secondary-light);
    border-color: var(--color-secondary-light);
    color: var(--color-text-contrast);
}

/* ── Secondary filled: solid orange ── */

.btn.btn-secondary-filled {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-contrast);
    text-decoration: none;
}

.btn.btn-secondary-filled:hover {
    background-color: var(--color-secondary-light);
    border-color: var(--color-secondary-light);
    color: var(--color-text-contrast);
    text-decoration: none;
}

.btn.btn-secondary-filled:active {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}