/**
 * Button Components
 * All button styles across the platform
 */

/* ===== PRIMARY BUTTON ===== */
.btn-primary {
    background-color: var(--accent-primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 1em;
    font-weight: var(--weight-semibold);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
}

/* ===== SECONDARY BUTTON ===== */
.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 1em;
    font-weight: var(--weight-medium);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-secondary:hover {
    background-color: var(--bg-quaternary);
    border-color: var(--border-secondary);
}

/* ===== EDIT/SAVE/CANCEL BUTTONS ===== */
.btn-edit, .btn-save, .btn-cancel {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.9em;
    font-weight: var(--weight-medium);
    transition: all var(--transition-base);
}

.btn-edit {
    background-color: var(--bg-quaternary);
    color: var(--text-primary);
}

.btn-edit:hover {
    background-color: var(--text-muted);
}

.btn-save {
    background-color: var(--success);
    color: white;
}

.btn-save:hover {
    background-color: #059669;
}

.btn-cancel {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.btn-cancel:hover {
    background-color: var(--bg-quaternary);
}

/* ===== DANGER/DELETE BUTTON ===== */
.btn-danger {
    background-color: var(--error);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 1em;
    font-weight: var(--weight-semibold);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-danger:hover {
    background-color: #dc2626;
}

/* ===== OUTLINE BUTTON ===== */
.btn-outline {
    background-color: transparent;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    padding: 10px 22px;
    border-radius: var(--radius-md);
    font-size: 1em;
    font-weight: var(--weight-semibold);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-outline:hover {
    background-color: var(--accent-primary);
    color: white;
}

/* ===== DISABLED STATE ===== */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}