/* =============================================================
   GEA · Buttons
   Variants: primary, secondary, ghost, outline, danger, brand-soft
   Sizes:    xs, sm, md (default), lg, xl
   States:   hover, focus, active, disabled, loading
   Modifiers: --icon (icon only square), --block (full width)
   ============================================================= */

.gea-btn {
    --_btn-bg: transparent;
    --_btn-bg-hover: transparent;
    --_btn-bg-active: transparent;
    --_btn-color: var(--gea-text);
    --_btn-border: transparent;
    --_btn-shadow: none;
    --_btn-h: 40px;
    --_btn-px: 16px;
    --_btn-fz: 14px;
    --_btn-radius: var(--gea-radius-md);
    --_btn-icon: 16px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gea-space-2);
    height: var(--_btn-h);
    padding: 0 var(--_btn-px);
    font-family: var(--gea-font-sans);
    font-size: var(--_btn-fz);
    font-weight: var(--gea-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
    color: var(--_btn-color);
    background: var(--_btn-bg);
    border: 1px solid var(--_btn-border);
    border-radius: var(--_btn-radius);
    box-shadow: var(--_btn-shadow);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background-color var(--gea-duration-fast) var(--gea-ease-out),
        border-color var(--gea-duration-fast) var(--gea-ease-out),
        color var(--gea-duration-fast) var(--gea-ease-out),
        box-shadow var(--gea-duration-fast) var(--gea-ease-out),
        transform var(--gea-duration-instant) var(--gea-ease-out);
}

.gea-btn:hover  { background: var(--_btn-bg-hover); }
.gea-btn:active { background: var(--_btn-bg-active); transform: translateY(1px); }
.gea-btn:focus-visible {
    outline: none;
    box-shadow: var(--_btn-shadow), var(--gea-ring-brand);
}
.gea-btn[disabled],
.gea-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- icon slot ---------- */
.gea-btn .gea-icon {
    width: var(--_btn-icon);
    height: var(--_btn-icon);
    flex: none;
}

/* ---------- VARIANT · primary (brand fill, dark text) ---------- */
.gea-btn--primary {
    --_btn-bg:        var(--gea-brand-500);
    --_btn-bg-hover:  var(--gea-brand-400);
    --_btn-bg-active: var(--gea-brand-600);
    --_btn-color:     var(--gea-text-on-brand);
    --_btn-border:    transparent;
    --_btn-shadow:    var(--gea-shadow-sm);
}
.gea-btn--primary:hover  { box-shadow: var(--gea-glow-brand); }
.gea-btn--primary:focus-visible { box-shadow: var(--gea-glow-brand-strong), var(--gea-ring-brand); }

/* ---------- VARIANT · secondary (raised dark surface) ---------- */
.gea-btn--secondary {
    --_btn-bg:        var(--gea-surface-raised);
    --_btn-bg-hover:  var(--gea-surface-overlay);
    --_btn-bg-active: var(--gea-surface);
    --_btn-color:     var(--gea-text);
    --_btn-border:    var(--gea-border);
}
.gea-btn--secondary:hover { border-color: var(--gea-border-strong); }

/* ---------- VARIANT · outline (transparent + border) ---------- */
.gea-btn--outline {
    --_btn-bg:        transparent;
    --_btn-bg-hover:  rgba(255, 255, 255, 0.04);
    --_btn-bg-active: rgba(255, 255, 255, 0.08);
    --_btn-color:     var(--gea-text);
    --_btn-border:    var(--gea-border-strong);
}

/* ---------- VARIANT · ghost (text only) ---------- */
.gea-btn--ghost {
    --_btn-bg:        transparent;
    --_btn-bg-hover:  rgba(255, 255, 255, 0.05);
    --_btn-bg-active: rgba(255, 255, 255, 0.08);
    --_btn-color:     var(--gea-text);
    --_btn-border:    transparent;
}
.gea-btn--ghost.is-muted { --_btn-color: var(--gea-text-muted); }

/* ---------- VARIANT · brand-soft (tinted brand bg) ---------- */
.gea-btn--brand-soft {
    --_btn-bg:        rgba(1, 238, 235, 0.10);
    --_btn-bg-hover:  rgba(1, 238, 235, 0.18);
    --_btn-bg-active: rgba(1, 238, 235, 0.24);
    --_btn-color:     var(--gea-brand-300);
    --_btn-border:    rgba(1, 238, 235, 0.20);
}

/* ---------- VARIANT · danger ---------- */
.gea-btn--danger {
    --_btn-bg:        var(--gea-danger);
    --_btn-bg-hover:  #FF6B6B;
    --_btn-bg-active: #E64545;
    --_btn-color:     #FFFFFF;
    --_btn-border:    transparent;
    --_btn-shadow:    var(--gea-shadow-sm);
}
.gea-btn--danger:focus-visible {
    box-shadow: var(--gea-shadow-sm), var(--gea-ring-danger);
}

/* ---------- VARIANT · danger-soft ---------- */
.gea-btn--danger-soft {
    --_btn-bg:        var(--gea-danger-soft);
    --_btn-bg-hover:  rgba(255, 77, 77, 0.20);
    --_btn-bg-active: rgba(255, 77, 77, 0.28);
    --_btn-color:     #FF7A7A;
    --_btn-border:    var(--gea-danger-border);
}

/* ---------- VARIANT · link ---------- */
.gea-btn--link {
    --_btn-h: auto;
    --_btn-px: 0;
    --_btn-color: var(--gea-brand-500);
    --_btn-radius: 0;
    height: auto;
    padding: 0;
    background: transparent !important;
    border-color: transparent !important;
}
.gea-btn--link:hover { color: var(--gea-brand-300); transform: none; }
.gea-btn--link:active { transform: none; }

/* ---------- SIZES ---------- */
.gea-btn--xs { --_btn-h: 28px; --_btn-px: 10px; --_btn-fz: 12px; --_btn-icon: 14px; --_btn-radius: var(--gea-radius-sm); }
.gea-btn--sm { --_btn-h: 32px; --_btn-px: 12px; --_btn-fz: 13px; --_btn-icon: 14px; }
.gea-btn--md { --_btn-h: 40px; --_btn-px: 16px; --_btn-fz: 14px; --_btn-icon: 16px; }
.gea-btn--lg { --_btn-h: 48px; --_btn-px: 20px; --_btn-fz: 15px; --_btn-icon: 18px; --_btn-radius: var(--gea-radius-lg); }
.gea-btn--xl { --_btn-h: 56px; --_btn-px: 28px; --_btn-fz: 16px; --_btn-icon: 20px; --_btn-radius: var(--gea-radius-lg); }

/* ---------- MODIFIERS ---------- */
.gea-btn--icon {
    width: var(--_btn-h);
    padding: 0;
}

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

.gea-btn--pill { --_btn-radius: var(--gea-radius-full); }

/* ---------- LOADING ---------- */
.gea-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
}
.gea-btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--_btn-color);
    animation: gea-spin 0.7s linear infinite;
}

@keyframes gea-spin {
    to { transform: rotate(360deg); }
}

/* ---------- BUTTON GROUP ---------- */
.gea-btn-group {
    display: inline-flex;
    isolation: isolate;
}
.gea-btn-group .gea-btn {
    border-radius: 0;
    margin-left: -1px;
}
.gea-btn-group .gea-btn:first-child {
    border-top-left-radius: var(--gea-radius-md);
    border-bottom-left-radius: var(--gea-radius-md);
    margin-left: 0;
}
.gea-btn-group .gea-btn:last-child {
    border-top-right-radius: var(--gea-radius-md);
    border-bottom-right-radius: var(--gea-radius-md);
}
.gea-btn-group .gea-btn:hover,
.gea-btn-group .gea-btn:focus-visible,
.gea-btn-group .gea-btn.is-active { z-index: 1; }

.gea-btn-group .gea-btn.is-active {
    background: var(--gea-surface-overlay);
    color: var(--gea-text);
    border-color: var(--gea-border-strong);
}

/* ---------- ICON BUTTON (chrome free, used in toolbars) ---------- */
.gea-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--gea-radius-md);
    color: var(--gea-text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--gea-duration-fast) var(--gea-ease-out),
        color var(--gea-duration-fast) var(--gea-ease-out),
        border-color var(--gea-duration-fast) var(--gea-ease-out);
}
.gea-icon-btn:hover { color: var(--gea-text); background: rgba(255, 255, 255, 0.06); }
.gea-icon-btn:focus-visible { box-shadow: var(--gea-ring-brand); outline: none; }
.gea-icon-btn .gea-icon { width: 18px; height: 18px; }
.gea-icon-btn--sm { width: 28px; height: 28px; }
.gea-icon-btn--sm .gea-icon { width: 14px; height: 14px; }
.gea-icon-btn--lg { width: 44px; height: 44px; }
.gea-icon-btn--lg .gea-icon { width: 22px; height: 22px; }

/* Pointer-coarse devices: enforce 44 × 44 minimum for icon-only buttons (WCAG 2.5.5). */
@media (pointer: coarse) {
    .gea-icon-btn { width: 44px; height: 44px; }
    .gea-icon-btn--sm { width: 36px; height: 36px; }
}