/* ============================================
   BUTTON COMPONENT SYSTEM
   Centralized button styles using design tokens
   No base .btn class to avoid Bootstrap conflicts
   ============================================ */

/* ============================================
   PRIMARY BUTTON
   ============================================ */

.btn--primary {
    /* Layout & Structure */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);

    /* Typography */
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);

    /* Spacing */
    padding: var(--button-padding-y) var(--button-padding-x);

    /* Appearance */
    border-radius: var(--button-border-radius);
    border: var(--button-border-width) solid;

    /* Colors */
    background: var(--button-primary-bg);
    color: var(--button-primary-color);
    border-color: var(--button-primary-border);

    /* Behavior */
    transition: var(--button-transition);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.btn--primary:hover {
    background: var(--button-primary-bg-hover);
    border-color: var(--button-primary-border-hover);
    color: var(--button-primary-color);
}

.btn--primary:active {
    background: var(--button-primary-bg-active);
    border-color: var(--button-primary-border-active);
}

.btn--primary:focus {
    outline: none;
    box-shadow: var(--button-primary-focus-shadow);
}

.btn--primary:disabled {
    background: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================
   SECONDARY BUTTON
   ============================================ */

.btn--secondary {
    /* Layout & Structure */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);

    /* Typography */
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);

    /* Spacing */
    padding: var(--button-padding-y) var(--button-padding-x);

    /* Appearance */
    border-radius: var(--button-border-radius);
    border: var(--button-border-width) solid;

    /* Colors */
    background: var(--button-secondary-bg);
    color: var(--button-secondary-color);
    border-color: var(--button-secondary-border);

    /* Behavior */
    transition: var(--button-transition);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

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

.btn--secondary:active {
    background: var(--button-secondary-bg-active);
    border-color: var(--button-secondary-border-active);
}

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

/* ============================================
   DESTRUCTIVE BUTTON
   ============================================ */

.btn--destructive {
    /* Layout & Structure */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);

    /* Typography */
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);

    /* Spacing */
    padding: var(--button-padding-y) var(--button-padding-x);

    /* Appearance */
    border-radius: var(--button-border-radius);
    border: var(--button-border-width) solid;

    /* Colors */
    background: var(--button-destructive-bg);
    color: var(--button-destructive-color);
    border-color: var(--button-destructive-border);

    /* Behavior */
    transition: var(--button-transition);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.btn--destructive:hover {
    background: var(--button-destructive-bg-hover);
    border-color: var(--button-destructive-border-hover);
    color: var(--button-destructive-color);
}

.btn--destructive:active {
    background: var(--button-destructive-bg-active);
    border-color: var(--button-destructive-border-active);
}

.btn--destructive:focus {
    outline: none;
    box-shadow: var(--button-destructive-focus-shadow);
}

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

/* ============================================
   GHOST BUTTON (Transparent)
   ============================================ */

.btn--ghost {
    /* Layout & Structure */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);

    /* Typography */
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);

    /* Spacing */
    padding: var(--button-padding-y) var(--button-padding-x);

    /* Appearance */
    border-radius: var(--button-border-radius);
    border: var(--button-border-width) solid;

    /* Colors */
    background: var(--button-ghost-bg);
    color: var(--button-ghost-color);
    border-color: var(--button-ghost-border);

    /* Behavior */
    transition: var(--button-transition);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.btn--ghost:hover {
    background: var(--button-ghost-bg-hover);
    color: var(--button-ghost-color-hover);
    border-color: var(--button-ghost-border-hover);
}

.btn--ghost:active {
    background: var(--button-ghost-bg-active);
}

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

/* ============================================
   ICON BUTTON VARIANT
   Used with ghost for icon-only buttons
   ============================================ */

.btn--icon {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    padding: 0;
    font-size: var(--button-icon-font-size);
}

/* Ghost Danger Variant for Icon Buttons */
.btn--icon.btn--ghost.btn--danger:hover {
    background: var(--button-ghost-danger-bg-hover);
    color: var(--button-ghost-danger-color-hover);
    border-color: var(--button-ghost-danger-border-hover);
}

/* Tooltip Support for Icon Buttons */
.btn--icon[data-bs-toggle="tooltip"] {
    cursor: pointer;
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

.btn--sm {
    padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
    font-size: var(--button-font-size-sm);
}