/**
 * Button Component - Prime Factors Pro
 * Standardized button system with consistent sizing, states, and hierarchy.
 * Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 14.6
 */

/* ========================================
   Base Button
   ======================================== */

.btn-pfp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
    transition: background-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

/* ========================================
   Size Variants
   ======================================== */

.btn-pfp--sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

.btn-pfp--md {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-sm);
}

.btn-pfp--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-base);
}

/* ========================================
   Style Variants
   ======================================== */

/* Primary - Deep navy, high emphasis */
.btn-pfp--primary {
    background-color: var(--color-primary);
    color: var(--color-bg-primary);
    border-color: var(--color-primary);
}

.btn-pfp--primary:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px var(--color-primary);
}

/* Secondary - Gold accent, medium emphasis */
.btn-pfp--secondary {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-color: var(--color-secondary);
}

.btn-pfp--secondary:hover {
    background-color: var(--color-secondary-light);
    border-color: var(--color-secondary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px var(--color-secondary);
}

/* Outline - Bordered, low emphasis */
.btn-pfp--outline {
    background-color: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.btn-pfp--outline:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-text-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px var(--color-border);
}

/* Ghost - No border, minimal emphasis */
.btn-pfp--ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: transparent;
}

.btn-pfp--ghost:hover {
    background-color: var(--color-bg-tertiary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px var(--color-border);
}

/* Danger - Red, destructive actions */
.btn-pfp--danger {
    background-color: var(--color-danger);
    color: var(--color-bg-primary);
    border-color: var(--color-danger);
}

.btn-pfp--danger:hover {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px var(--color-danger);
}

/* ========================================
   Interactive States
   ======================================== */

/* Active/pressed state */
.btn-pfp:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Disabled state */
.btn-pfp:disabled,
.btn-pfp[disabled],
.btn-pfp--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* Loading state */
.btn-pfp--loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    position: relative;
}

/* ========================================
   Keyboard Focus Indicator
   Meets 3:1 contrast ratio (14.6)
   ======================================== */

.btn-pfp:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}