/**
 * ==========================================================================
 * BUTTON COMPONENTS
 * ==========================================================================
 *
 * Reusable button styles used throughout the application.
 * All buttons use the base .btn class combined with variant modifiers.
 *
 * BUTTON VARIANTS:
 * - .btn-primary   - Green accent background, used for primary actions
 * - .btn-secondary - Gray background, used for secondary actions
 * - .btn-outline   - Bordered, transparent background
 * - .btn-ghost     - No border/background, text only
 *
 * BUTTON SIZES:
 * - .btn-sm        - Smaller padding, text-xs
 * - (default)      - Standard size, text-sm
 * - .btn-lg        - Larger padding, text-base
 *
 * BUTTON SHAPES:
 * - (default)      - Rounded corners (radius-md)
 * - .btn-pill      - Fully rounded ends (radius-full)
 * - .btn-icon      - Circular, for icon-only buttons
 *
 * STATES:
 * - :disabled      - 50% opacity, not-allowed cursor
 * - :hover         - Variant-specific hover effect
 *
 * USAGE EXAMPLES:
 * <button class="btn btn-primary">Save</button>
 * <button class="btn btn-outline btn-sm">Cancel</button>
 * <button class="btn btn-icon btn-secondary"><svg>...</svg></button>
 *
 * PHP INTEGRATION:
 * - No PHP conversion needed; these are static utility classes
 *
 * ==========================================================================
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary Button */
.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-accent-hover);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-bg-hover);
}

/* Outline Button */
.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.btn-outline:hover:not(:disabled) {
    background-color: var(--color-bg-hover);
    border-color: var(--color-text-tertiary);
}

/* Ghost Button */
.btn-ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-xs);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-base);
}

/* Pill-shaped button (fully rounded) */
.btn-pill {
    border-radius: var(--radius-full);
}

/* Icon Button */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-full);
}

.btn-icon svg {
    width: 20px;
    height: 20px;
}

.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

.btn-icon.btn-sm svg {
    width: 16px;
    height: 16px;
}