/* ==========================================================
   buttons.css — Button components
   Primary, secondary, hover/focus/disabled states.
   ========================================================== */

/* --------------------------------------------------------
   Base — Shared styles for all buttons
   -------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: var(--button-min-height);
    padding: var(--button-padding);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base);
}

/* --------------------------------------------------------
   Primary — Green background, white text
   -------------------------------------------------------- */
.btn--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
}

/* --------------------------------------------------------
   Secondary — Transparent background, green border
   -------------------------------------------------------- */
.btn--secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

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

/* --------------------------------------------------------
   Ghost — White button (for dark backgrounds, e.g. hero)
   -------------------------------------------------------- */
.btn--ghost {
    background-color: transparent;
    border-color: var(--color-white);
    color: var(--color-white);
}

.btn--ghost:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    text-decoration: none;
}

/* --------------------------------------------------------
   Focus state (accessibility)
   -------------------------------------------------------- */
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--button-radius);
}

.btn--ghost:focus-visible {
    outline-color: var(--color-white);
}

/* --------------------------------------------------------
   Disabled-State
   -------------------------------------------------------- */
.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}