/* ===== BUTTON SYSTEM ===== */
/* Unified button component with variants */

/* ===== BASE BUTTON ===== */
.ds-button,
.button {
    /* Base styles */
    padding: 20px var(--spacing-large); /* Increased vertical padding from 16px to 20px */
    border-radius: var(--radius-button);
    border: 2px solid var(--glass-border); /* Increased from 1px for better visibility */
    background: var(--glass-bg);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--elevation-1);
    
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    
    /* Minimum touch target size for mobile */
    min-height: 52px; /* Increased from 44px for better visibility and tapping */
    
    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    
    /* Remove default button styles */
    outline: none;
}

/* Button States */
.ds-button:hover,
.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
    background: var(--glass-bg-strong);
}

.ds-button:active,
.button:active {
    transform: translateY(0);
    box-shadow: var(--elevation-1);
}

.ds-button:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.ds-button:disabled,
.button:disabled,
.button-disabled {
    opacity: 0.5;
    transform: none;
    pointer-events: none;
}

/* ===== BUTTON VARIANTS ===== */
.ds-button-primary,
.button-primary {
    background: var(--color-accent-primary);
    color: white;
    border-color: var(--color-accent-primary);
}

.ds-button-primary:hover,
.button-primary:hover {
    background: var(--color-accent-secondary);
    border-color: var(--color-accent-secondary);
}

.ds-button-secondary,
.button-secondary {
    background: var(--glass-bg);
    color: var(--color-text-primary);
}

.ds-button-secondary:hover,
.button-secondary:hover {
    background: var(--glass-bg-strong);
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.ds-button-danger,
.button-danger,
.danger-button {
    background: var(--color-accent-error);
    color: white;
    border-color: var(--color-accent-error);
}

.ds-button-danger:hover,
.button-danger:hover,
.danger-button:hover {
    background: var(--color-error);
    border-color: var(--color-error);
}

/* ===== BUTTON SIZES ===== */
.ds-button-small {
    padding: 16px var(--spacing-medium); /* Increased vertical padding */
    font-size: var(--font-size-sm);
    min-height: 44px; /* Maintain touch target */
}

.ds-button-large {
    padding: 24px var(--spacing-xl); /* Increased vertical padding */
    font-size: var(--font-size-lg);
    min-height: 60px; /* Larger touch target */
}

/* Mobile-specific button improvements */
@media (max-width: 400px) {
    .ds-button,
    .button {
        padding: 20px var(--spacing-large); /* Increased vertical padding */
        font-size: var(--font-size-md);
        min-height: 52px; /* Larger touch target on mobile */
        border-width: 2px;
    }
    
    /* Reduce button height in modals on mobile */
    .modal-actions .ds-button,
    .modal-actions .button,
    .modal-footer .ds-button,
    .modal-footer .button,
    .ds-modal-buttons .ds-button,
    .ds-modal-buttons .button {
        padding: 14px var(--spacing-medium); /* Reduced from 20px for shorter buttons */
        min-height: 44px; /* Reduced from 52px - still meets iOS minimum */
    }
}

@media (max-width: 375px) {
    .ds-button,
    .button {
        padding: 18px var(--spacing-large); /* Increased vertical padding */
        font-size: var(--font-size-md);
        min-height: 50px; /* Better touch target */
        border-width: 2px;
    }
    
    /* Reduce button height in modals on mobile */
    .modal-actions .ds-button,
    .modal-actions .button,
    .modal-footer .ds-button,
    .modal-footer .button,
    .ds-modal-buttons .ds-button,
    .ds-modal-buttons .button {
        padding: 12px var(--spacing-medium); /* Reduced from 18px for shorter buttons */
        min-height: 44px; /* Reduced from 50px - still meets iOS minimum */
    }
}

/* ===== BUTTON WITH ICONS ===== */
.ds-button .material-icons,
.button .material-icons {
    font-size: inherit;
    line-height: 1;
}