/**
 * TangoHUB Button Components
 * Standardized button styles using design tokens
 * 
 * Establishes clear button hierarchy:
 * - PRIMARY: Main call-to-action (one per section)
 * - SECONDARY: Alternative action
 * - OUTLINE: Tertiary action
 * - LINK: Minimal action, inline with text
 * 
 * @package TangoHUB_Event_Manager
 * @since 1.0.0
 * @see docs/decisions/ADR-008-buddyboss-styling-integration.md
 */

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

.tgh-btn {
    display: inline-block;
    padding: var(--tgh-spacing-sm) var(--tgh-spacing-md);
    font-size: var(--tgh-font-size-sm);
    font-weight: var(--tgh-font-weight-medium);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--tgh-border-width) solid transparent;
    border-radius: var(--tgh-border-radius-md);
    transition: all var(--tgh-transition-fast);
}

.tgh-btn:focus {
    outline: 2px solid var(--tgh-color-primary);
    outline-offset: 2px;
}

.tgh-btn:disabled,
.tgh-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   Button Variants - Hierarchy
   ========================================================================== */

/* PRIMARY - Main call-to-action (use ONE per section) */
.tgh-btn-primary {
    background-color: var(--tgh-color-primary);
    color: #ffffff;
    border-color: var(--tgh-color-primary);
}

.tgh-btn-primary:hover,
.tgh-btn-primary:focus {
    background-color: var(--tgh-color-primary-hover);
    border-color: var(--tgh-color-primary-hover);
    color: #ffffff;
    text-decoration: none;
}

/* SECONDARY - Alternative action */
.tgh-btn-secondary {
    background-color: var(--tgh-color-background-alt);
    color: var(--tgh-color-text);
    border-color: var(--tgh-color-border);
}

.tgh-btn-secondary:hover,
.tgh-btn-secondary:focus {
    background-color: var(--tgh-color-border);
    color: var(--tgh-color-text);
    text-decoration: none;
}

/* OUTLINE - Tertiary action */
.tgh-btn-outline {
    background-color: transparent;
    color: var(--tgh-color-primary);
    border-color: var(--tgh-color-primary);
}

.tgh-btn-outline:hover,
.tgh-btn-outline:focus {
    background-color: var(--tgh-color-primary);
    border-color: var(--tgh-color-primary);
    color: #ffffff;
    text-decoration: none;
}

/* LINK - Minimal action, inline with text */
.tgh-btn-link {
    background: none;
    color: var(--tgh-color-primary);
    border: none;
    padding: 0;
    text-decoration: none;
}

.tgh-btn-link:hover,
.tgh-btn-link:focus {
    text-decoration: underline;
    color: var(--tgh-color-primary-hover);
}

/* ==========================================================================
   Semantic Button Colors
   ========================================================================== */

/* Success (confirmation, completion) */
.tgh-btn-success {
    background-color: var(--tgh-color-success);
    color: #ffffff;
    border-color: var(--tgh-color-success);
}

.tgh-btn-success:hover,
.tgh-btn-success:focus {
    background-color: #218838;
    border-color: #218838;
    color: #ffffff;
    text-decoration: none;
}

/* Warning (caution, review needed) */
.tgh-btn-warning {
    background-color: var(--tgh-color-warning);
    color: #212529;
    border-color: var(--tgh-color-warning);
}

.tgh-btn-warning:hover,
.tgh-btn-warning:focus {
    background-color: #E0A800;
    border-color: #E0A800;
    color: #212529;
    text-decoration: none;
}

/* Danger (destructive, cancel, delete) */
.tgh-btn-danger {
    background-color: var(--tgh-color-danger);
    color: #ffffff;
    border-color: var(--tgh-color-danger);
}

.tgh-btn-danger:hover,
.tgh-btn-danger:focus {
    background-color: #C82333;
    border-color: #C82333;
    color: #ffffff;
    text-decoration: none;
}

/* ==========================================================================
   Button Sizes
   ========================================================================== */

.tgh-btn-sm {
    padding: var(--tgh-spacing-xs) var(--tgh-spacing-sm);
    font-size: var(--tgh-font-size-xs);
}

.tgh-btn-lg {
    padding: var(--tgh-spacing-md) var(--tgh-spacing-lg);
    font-size: var(--tgh-font-size-md);
}

/* ==========================================================================
   Button Block (full width)
   ========================================================================== */

.tgh-btn-block {
    display: block;
    width: 100%;
}

/* ==========================================================================
   Button Groups
   ========================================================================== */

.tgh-btn-group {
    display: inline-flex;
    gap: var(--tgh-spacing-sm);
}

.tgh-btn-group .tgh-btn {
    flex: 0 1 auto;
}

/* ==========================================================================
   Toggle Buttons (for expanding/collapsing sections)
   ========================================================================== */

.tgh-btn-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--tgh-spacing-xs);
    background-color: var(--tgh-color-background-alt);
    color: var(--tgh-color-primary);
    border-color: var(--tgh-color-primary);
}

.tgh-btn-toggle:hover,
.tgh-btn-toggle:focus {
    background-color: var(--tgh-color-primary);
    color: #ffffff;
    text-decoration: none;
}

.tgh-btn-toggle.active {
    background-color: var(--tgh-color-primary);
    color: #ffffff;
}

.tgh-btn-toggle .tgh-toggle-icon {
    font-size: 0.625rem;
    transition: transform var(--tgh-transition-fast);
}

.tgh-btn-toggle.active .tgh-toggle-icon {
    transform: rotate(180deg);
}

/* ==========================================================================
   Usage Guidelines (Comments for Developers)
   ========================================================================== */

/*
BUTTON HIERARCHY RULES:
1. Use ONE .tgh-btn-primary per section (main CTA)
2. Use .tgh-btn-secondary for alternative actions
3. Use .tgh-btn-outline for less important actions
4. Use .tgh-btn-link for inline actions within text

EXAMPLES:

Event Card Footer:
-------------------
<div class="tgh-event-card-footer">
    <button class="tgh-btn tgh-btn-primary">Register Now</button>
    <a href="#" class="tgh-btn tgh-btn-secondary">View Details</a>
    <a href="#" class="tgh-btn tgh-btn-outline">Download Schedule</a>
</div>

Modal Actions:
--------------
<div class="tgh-modal-footer">
    <button class="tgh-btn tgh-btn-primary">Confirm</button>
    <button class="tgh-btn tgh-btn-outline">Cancel</button>
</div>

Inline Link:
------------
<p>Want to change your selection? <a href="#" class="tgh-btn-link">Edit registration</a></p>
*/