// Optimize Button component performance
// Optimize Button component for performance. Reduce reflows, optimize animations, minimize DOM manipulation.

// Optimize Button component performance
// Optimize Button component for performance. Reduce reflows, optimize animations, minimize DOM manipulation.

// Optimize Button component performance
// Optimize Button component for performance. Reduce reflows, optimize animations, minimize DOM manipulation.

// Code review: public/css/components directory (13 files)
// Perform comprehensive code review of 13 files in public/css/components. Check for bugs, performance issues, security vulnerabilities, and best practices.
/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Button Component Styles
 * Additional button enhancements (base styles in design-system.css)
 */

/* === BUTTONS === */
/* Base button styles are in design-system.css */
/* Additional button enhancements below */

.crew-btn {
    flex: 0 0 auto;
    width: calc(var(--spacing-2xl) * 0.83); /* ~50px */
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) var(--spacing-xs);
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-lg);
    letter-spacing: var(--letter-spacing-tight);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-info);
    font-family: var(--font-heading);
    transition: all var(--transition-base);

.crew-btn:hover:not(:disabled) {
    background: var(--color-info);
    color: var(--color-bg-primary);
    transform: translateY(-2px);
    box-shadow: var(--glow-blue);

.btn-icon {
    font-size: var(--font-size-lg);
    display: inline-block;
    transition: transform var(--transition-base);

.roll-btn:hover .btn-icon {
    transform: rotate(15deg) scale(1.1);

/* Base action-btn styles are in design-system.css */
/* Additional enhancements below */

.btn {
    text-align: left;
    position: relative;
    overflow: hidden;

.action-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: var(--radius-full);
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;

.action-btn:hover::after {
    width: 304px;
    height: 304px;

/**
 * Mobile Improvements
 * Review and improve Button component for responsive design. Test on mobile, tablet, and desktop. Ensure touch targets are adequate.
 */

/**
 * Improve Button component accessibility
 * Enhance Button component for accessibility. Add ARIA labels, keyboard navigation, focus indicators, and screen reader support.
 */

/**
 * Improve Button component accessibility
 * Enhance Button component for accessibility. Add ARIA labels, keyboard navigation, focus indicators, and screen reader support.
 */

}}}}}}}