/**
 * Button Component System
 *
 * Standardized button styles using CSS variables.
 * Replaces 27 different button classes with unified system.
 *
 * Usage:
 *   <button class="btn btn-primary">Click me</button>
 *   <button class="btn btn-secondary btn-sm">Small button</button>
 *   <button class="btn btn-danger btn-lg">Large danger</button>
 */

/* ========================================
   BUTTON VARIABLES
======================================== */

:root {
    /* Button sizing - Aliases to global design tokens */
    --btn-padding: var(--spacing-sm) var(--spacing-xl);          /* 8px 20px */
    --btn-padding-sm: var(--spacing-xs) var(--spacing-md);       /* 4px 12px */
    --btn-padding-xs: 2px 8px;                                   /* 2px 8px - Extra compact for controls */
    --btn-padding-lg: var(--spacing-md) var(--spacing-3xl);      /* 12px 32px */
    --btn-padding-xl: 20px 60px;                                  /* 20px 60px - Extra large */

    --btn-font-size: var(--text-base);       /* 14px */
    --btn-font-size-sm: var(--text-sm);      /* 13px */
    --btn-font-size-lg: var(--text-lg);      /* 16px */
    --btn-font-size-xl: 20px;                /* 20px - Extra large */

    --btn-font-weight: var(--font-semibold); /* 600 */
    --btn-line-height: var(--leading-tight); /* 1.2 */

    --btn-radius: var(--radius-md);                  /* 6px */
    --btn-border-width: var(--border-width-thin);    /* 1px */

    /* Icon buttons */
    --btn-icon-padding: var(--spacing-sm);   /* 8px */
    --btn-icon-size: var(--spacing-xl);      /* 20px */

    /* Transitions */
    --btn-transition: var(--transition-base); /* 200ms ease */
}

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

.btn {
    /* Sizing */
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);

    /* Styling */
    border-radius: var(--btn-radius);
    border: var(--btn-border-width) solid transparent;

    /* Behavior */
    cursor: pointer;
    transition: var(--btn-transition);
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* Reset browser defaults */
    background: none;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    user-select: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

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

.btn-xs {
    padding: var(--btn-padding-xs);
    font-size: var(--btn-font-size-sm);
    line-height: 1;
}

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

.btn-xl {
    padding: var(--btn-padding-xl);
    font-size: var(--btn-font-size-xl);
}

/* ========================================
   COLOR VARIANTS
======================================== */

/* Primary Button */
.btn-primary {
    background: var(--theme-btn-primary-bg);
    color: var(--theme-btn-primary-color);
    border-color: var(--theme-btn-primary-bg);
}

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

/* Secondary Button */
.btn-secondary {
    background: var(--theme-btn-secondary-bg);
    color: var(--theme-btn-secondary-color);
    border-color: var(--theme-btn-secondary-border, transparent);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--theme-btn-secondary-hover-bg);
}

/* Danger Button */
.btn-danger {
    background: var(--theme-btn-danger-bg);
    color: var(--theme-btn-danger-color);
    border-color: var(--theme-btn-danger-bg);
}

.btn-danger:hover:not(:disabled) {
    background: var(--theme-btn-danger-hover-bg);
    border-color: var(--theme-btn-danger-hover-bg);
}

/* Success Button */
.btn-success {
    background: var(--theme-btn-success-bg);
    color: var(--theme-btn-success-color);
    border-color: var(--theme-btn-success-bg);
}

.btn-success:hover:not(:disabled) {
    background: var(--theme-btn-success-hover-bg);
    border-color: var(--theme-btn-success-hover-bg);
}

/* Warning Button */
.btn-warning {
    background: var(--theme-btn-warning-bg, rgb(251, 191, 36));
    color: var(--theme-btn-warning-color, rgb(120, 53, 15));
    border-color: var(--theme-btn-warning-bg, rgb(251, 191, 36));
}

.btn-warning:hover:not(:disabled) {
    background: var(--theme-btn-warning-hover-bg, rgb(245, 158, 11));
}

/* Unread/Alert Button State (for Mark All Read buttons) */
.btn-has-unread {
    background: var(--theme-btn-unread-bg) !important;
    color: var(--theme-btn-unread-color) !important;
    border-color: var(--theme-btn-unread-border) !important;
}

/* ========================================
   SPECIAL VARIANTS
======================================== */

/* Link Button (looks like a link) */
.btn-link {
    background: transparent;
    color: var(--theme-link-color);
    border: none;
    padding: 0;
    text-decoration: underline;
}

.btn-link:hover:not(:disabled) {
    color: var(--theme-link-hover-color);
}

/* Icon Button (square, icon only) */
.btn-icon {
    padding: var(--btn-icon-padding);
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    min-width: var(--btn-icon-size);
}

/* Ghost Button (transparent with border) */
.btn-ghost {
    background: transparent;
    color: var(--theme-text-primary);
    border-color: var(--theme-border-color);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--theme-btn-ghost-hover-bg, rgba(0, 0, 0, 0.05));
}

/* Full Width Button */
.btn-block {
    display: flex;
    width: 100%;
}

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

.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--btn-radius);
    border-bottom-left-radius: var(--btn-radius);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--btn-radius);
    border-bottom-right-radius: var(--btn-radius);
}

.btn-group .btn:not(:last-child) {
    border-right: none;
}

/* ========================================
   LEGACY CLASS MAPPINGS - REMOVED
   HTML already uses new component system (.btn .btn-*)
======================================== */

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

@media (max-width: 768px) {
    .btn {
        /* Slightly smaller buttons on mobile */
        padding: 8px 16px;
        font-size: 13px;
    }

    .btn-sm {
        padding: 5px 10px;
        font-size: 11px;
    }

    .btn-lg {
        padding: 12px 24px;
        font-size: 15px;
    }
}