/**
 * Button Component
 * ================
 * Naming Convention: button-{variant}, button-{size}
 * 
 * Classes defined:
 * - .button (base)
 * - .button-primary
 * - .button-secondary
 * - .button-danger
 * - .button-success
 * - .button-small
 * - .button-large
 * - .button-outline
 * - .button-link
 * - .button-group
 *
 * NO btn-*, NO Bootstrap naming — pure CSS with CSS custom properties
 * All custom properties include hardcoded fallbacks for safety
 */

/* ===========================================
   Base Button
   =========================================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    border-radius: var(--radius-lg, 8px);
    border: 1px solid transparent;
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast, 150ms ease);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--color-accent-muted, rgba(99, 102, 241, 0.15));
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===========================================
   Primary Button
   =========================================== */
.button-primary {
    background: linear-gradient(45deg, var(--color-primary, #6366f1), var(--color-accent, #818cf8));
    color: var(--color-text-inverse, #ffffff);
    border-color: var(--color-primary, #6366f1);
}

.button-primary:hover:not(:disabled) {
    background: linear-gradient(45deg, var(--color-primary-hover, #4f46e5), var(--color-primary, #6366f1));
    border-color: var(--color-primary-hover, #4f46e5);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

.button-primary:active:not(:disabled) {
    background: var(--color-primary-hover, #4f46e5);
    border-color: var(--color-primary-hover, #4f46e5);
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Primary solid variant (no gradient) */
.button-primary-solid {
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #ffffff);
    border-color: var(--color-primary, #6366f1);
}

.button-primary-solid:hover:not(:disabled) {
    background: var(--color-primary-hover, #4f46e5);
    border-color: var(--color-primary-hover, #4f46e5);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

/* ===========================================
   Secondary Button
   =========================================== */
.button-secondary {
    background: var(--color-bg-secondary, #f9fafb);
    color: var(--color-text, #1f2937);
    border-color: var(--color-border, #e5e7eb);
}

.button-secondary:hover:not(:disabled) {
    background: var(--color-bg-hover, #e5e7eb);
    border-color: var(--color-border, #e5e7eb);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

.button-secondary:active:not(:disabled) {
    background: var(--color-bg-tertiary, #f3f4f6);
    border-color: var(--color-border, #e5e7eb);
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* ===========================================
   Danger Button
   =========================================== */
.button-danger {
    background: var(--color-danger, #ef4444);
    color: var(--color-text-inverse, #ffffff);
    border-color: var(--color-danger, #ef4444);
}

.button-danger:hover:not(:disabled) {
    background: var(--color-danger-hover, #dc2626);
    border-color: var(--color-danger-hover, #dc2626);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

.button-danger:active:not(:disabled) {
    background: var(--color-danger-hover, #dc2626);
    border-color: var(--color-danger-hover, #dc2626);
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* ===========================================
   Success Button
   =========================================== */
.button-success {
    background: var(--color-success, #10b981);
    color: var(--color-text-inverse, #ffffff);
    border-color: var(--color-success, #10b981);
}

.button-success:hover:not(:disabled) {
    background: var(--color-success-hover, #059669);
    border-color: var(--color-success-hover, #059669);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

.button-success:active:not(:disabled) {
    background: var(--color-success-hover, #059669);
    border-color: var(--color-success-hover, #059669);
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* ===========================================
   Warning Button
   =========================================== */
.button-warning {
    background: var(--color-warning, #f59e0b);
    color: var(--color-text-inverse, #ffffff);
    border-color: var(--color-warning, #f59e0b);
}

.button-warning:hover:not(:disabled) {
    background: var(--color-warning-hover, #d97706);
    border-color: var(--color-warning-hover, #d97706);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

.button-warning:active:not(:disabled) {
    background: var(--color-warning-hover, #d97706);
    border-color: var(--color-warning-hover, #d97706);
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* ===========================================
   Info Button
   =========================================== */
.button-info {
    background: var(--color-info, #3b82f6);
    color: var(--color-text-inverse, #ffffff);
    border-color: var(--color-info, #3b82f6);
}

.button-info:hover:not(:disabled) {
    background: var(--color-info-hover, #2563eb);
    border-color: var(--color-info-hover, #2563eb);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

.button-info:active:not(:disabled) {
    background: var(--color-info-hover, #2563eb);
    border-color: var(--color-info-hover, #2563eb);
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* ===========================================
   Size Variants
   =========================================== */
.button-small {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: var(--text-xs, 0.75rem);
    gap: var(--space-1, 0.25rem);
}

.button-large {
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
    font-size: var(--text-base, 1rem);
    gap: var(--space-3, 0.75rem);
}

/* ===========================================
   Outline Variants
   =========================================== */
.button-outline {
    background: transparent;
    border-width: 1px;
}

.button-outline.button-primary {
    color: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    background: transparent;
}

.button-outline.button-primary:hover:not(:disabled) {
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #ffffff);
}

.button-outline.button-secondary {
    color: var(--color-text, #1f2937);
    border-color: var(--color-border, #e5e7eb);
    background: transparent;
}

.button-outline.button-secondary:hover:not(:disabled) {
    background: var(--color-bg-secondary, #f9fafb);
}

.button-outline.button-danger {
    color: var(--color-danger, #ef4444);
    border-color: var(--color-danger, #ef4444);
    background: transparent;
}

.button-outline.button-danger:hover:not(:disabled) {
    background: var(--color-danger, #ef4444);
    color: var(--color-text-inverse, #ffffff);
}

.button-outline.button-success {
    color: var(--color-success, #10b981);
    border-color: var(--color-success, #10b981);
    background: transparent;
}

.button-outline.button-success:hover:not(:disabled) {
    background: var(--color-success, #10b981);
    color: var(--color-text-inverse, #ffffff);
}

/* ===========================================
   Link Button
   =========================================== */
.button-link {
    background: transparent;
    border: none;
    color: var(--color-primary, #6366f1);
    text-decoration: underline;
    padding: 0;
}

.button-link:hover:not(:disabled) {
    color: var(--color-primary-hover, #4f46e5);
    text-decoration: none;
}

.button-link:focus {
    box-shadow: none;
    text-decoration: underline;
}

/* ===========================================
   Icon Button (no text, just icon)
   =========================================== */
.button-icon {
    padding: var(--space-3, 0.75rem);
    min-width: 2.5rem;
    min-height: 2.5rem;
}

.button-icon.button-small {
    padding: var(--space-2, 0.5rem);
    min-width: 2rem;
    min-height: 2rem;
}

.button-icon.button-large {
    padding: var(--space-4, 1rem);
    min-width: 3rem;
    min-height: 3rem;
}

/* ===========================================
   Button Group
   =========================================== */
.button-group {
    display: inline-flex;
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
}

.button-group .button {
    border-radius: 0;
    border-right-width: 0;
}

.button-group .button:first-child {
    border-top-left-radius: var(--radius-lg, 8px);
    border-bottom-left-radius: var(--radius-lg, 8px);
}

.button-group .button:last-child {
    border-top-right-radius: var(--radius-lg, 8px);
    border-bottom-right-radius: var(--radius-lg, 8px);
    border-right-width: 1px;
}

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

/* ===========================================
   Pill-Shaped Button (Full Rounded)
   =========================================== */
.button-pill {
    border-radius: var(--radius-full, 9999px);
}

/* ===========================================
   Dark Theme Overrides
   =========================================== */
[data-theme="dark"] .button-secondary {
    background: var(--color-bg-secondary, #1f2937);
    color: var(--color-text, #f9fafb);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .button-secondary:hover:not(:disabled) {
    background: var(--color-bg-hover, #374151);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .button-outline.button-secondary {
    color: var(--color-text, #f9fafb);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .button-outline.button-secondary:hover:not(:disabled) {
    background: var(--color-bg-secondary, #1f2937);
}

[data-theme="dark"] .button:focus {
    box-shadow: 0 0 0 3px var(--color-accent-muted, rgba(99, 102, 241, 0.25));
}