/**
 * AIDocBot - Buttons Component
 * Design System Version 1.0
 */

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-danger {
    font-family: var(--font-family);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    white-space: nowrap;
    user-select: none;
}

/* ========================================
   PRIMARY BUTTON - Main actions
   ======================================== */

.btn-primary {
    background: var(--brand-primary);
    color: white;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

    .btn-primary:hover:not(:disabled) {
        background: var(--brand-primary-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(43, 91, 186, 0.3);
    }

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

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

    .btn-primary:disabled {
        background: var(--neutral-300);
        color: var(--neutral-500);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ========================================
   SECONDARY BUTTON - Alternative actions
   ======================================== */

.btn-secondary {
    background: var(--neutral-100);
    color: var(--neutral-700);
    border: var(--border-width) solid var(--neutral-300);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
}

    .btn-secondary:hover:not(:disabled) {
        background: var(--neutral-200);
        border-color: var(--neutral-400);
    }

    .btn-secondary:active:not(:disabled) {
        background: var(--neutral-300);
    }

    .btn-secondary:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
    }

    .btn-secondary:disabled {
        background: var(--neutral-50);
        color: var(--neutral-400);
        border-color: var(--neutral-200);
        cursor: not-allowed;
    }

/* ========================================
   OUTLINE BUTTON - Tertiary actions
   ======================================== */

.btn-outline {
    background: transparent;
    color: var(--brand-primary);
    border: 1.5px solid var(--brand-primary);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
}

    .btn-outline:hover:not(:disabled) {
        background: var(--brand-primary-lighter);
    }

    .btn-outline:active:not(:disabled) {
        background: var(--brand-primary-light);
        color: white;
    }

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

    .btn-outline:disabled {
        color: var(--neutral-400);
        border-color: var(--neutral-300);
        cursor: not-allowed;
    }

/* ========================================
   GHOST BUTTON - Minimal actions
   ======================================== */

.btn-ghost {
    background: transparent;
    color: var(--neutral-700);
    border: none;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
}

    .btn-ghost:hover:not(:disabled) {
        background: var(--neutral-100);
    }

    .btn-ghost:active:not(:disabled) {
        background: var(--neutral-200);
    }

    .btn-ghost:focus-visible {
        outline: 2px solid var(--neutral-300);
        outline-offset: 2px;
    }

    .btn-ghost:disabled {
        color: var(--neutral-400);
        cursor: not-allowed;
    }

/* ========================================
   DANGER BUTTON - Destructive actions
   ======================================== */

.btn-danger {
    background: var(--error);
    color: white;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

    .btn-danger:hover:not(:disabled) {
        background: var(--error-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    .btn-danger:active:not(:disabled) {
        transform: translateY(0);
    }

    .btn-danger:focus-visible {
        outline: 2px solid var(--error);
        outline-offset: 2px;
    }

    .btn-danger:disabled {
        background: var(--neutral-300);
        color: var(--neutral-500);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ========================================
   BUTTON SIZES
   ======================================== */

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

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

/* Icon-only buttons */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-sm {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-lg {
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Full width button */
.btn-block {
    width: 100%;
    justify-content: center;
}

/* ========================================
   BUTTON GROUPS
   ======================================== */

.btn-group {
    display: inline-flex;
    gap: var(--space-2);
}

.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }

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