/* =============================================================================
   Osmanthus Platform - Unified Button Component System
   
   This file contains all button-related styles for the platform.
   All buttons follow the Mindstate minimalist design pattern.
   ============================================================================= */

/* =============================================================================
   Button-Specific CSS Variables
   ============================================================================= */
   :root {
    /* Button Sizing */
    --btn-height: 42px;
    --btn-height-sm: 36px;
    --btn-height-lg: 48px;
    --btn-padding-x: var(--spacing-lg);
    --btn-padding-x-sm: var(--spacing-md);
    --btn-padding-x-lg: var(--spacing-xl);
    --btn-radius: 0; /* Mindstate: Sharp corners */
    --btn-radius-rounded: 0; /* Mindstate: Sharp corners */
    
    /* Button Colors */
    --btn-bg: var(--color-white); /* Mindstate: White background */
    --btn-text: var(--color-text);
    --btn-border: var(--ms-dark-gray); /* Mindstate: Dark border */
    
    /* Button Transitions */
    --btn-transition: all 0.15s ease; /* Mindstate: Faster transitions */
  }
  
  /* =============================================================================
     Base Button Component
     ============================================================================= */
  .os-btn {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0 var(--btn-padding-x);
    min-height: var(--btn-height);
    
    /* Typography */
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase; /* Mindstate: Uppercase for buttons */
    letter-spacing: 0.05em; /* Mindstate: Wide letter spacing */
    
    /* Styling */
    background: var(--btn-bg); /* Mindstate: Solid color, no gradient */
    color: var(--btn-text);
    border: 1px solid var(--btn-border); /* Mindstate: Added border */
    border-radius: var(--btn-radius); /* Mindstate: Sharp corners */
    cursor: pointer;
    user-select: none;
    
    /* Mindstate: Minimal shadow instead of neuomorphic */
    box-shadow: var(--ms-shadow-light);
      
    /* Transitions */
    transition: var(--btn-transition);
    position: relative;
    overflow: hidden;
  }
  
  /* Button hover state */
  /* Mindstate: Simplified hover with reduced movement */
  .os-btn:hover:not(:disabled):not(.os-btn--loading) {
    transform: translateY(-1px); /* Mindstate: Reduced from -2px */
    box-shadow: var(--ms-shadow-medium);
    background: var(--color-bg-light); /* Mindstate: Light gray on hover */
  }
  
  /* Button active/pressed state */
  /* Mindstate: Remove inset shadow, use simple feedback */
  .os-btn:active:not(:disabled):not(.os-btn--loading) {
    transform: translateY(0);
    box-shadow: none; /* Mindstate: No shadow when pressed */
    background: var(--color-bg-dark); /* Mindstate: Darker background */
  }
  
  /* Button focus state */
  /* Mindstate: Simple outline instead of complex shadow */
  .os-btn:focus-visible {
    outline: 2px solid var(--ms-data-green); /* Mindstate: Data green focus */
    outline-offset: 2px;
    box-shadow: var(--ms-shadow-light);
  }
  
  /* =============================================================================
     Button Variants - Color Themes
     ============================================================================= */
  
  /* Primary button */
  /* Mindstate: Solid color with data green */
  .os-btn--primary {
    background: var(--ms-dark-gray); /* Mindstate: Dark gray background */
    color: var(--color-white);
    border-color: var(--ms-dark-gray);
  }
  
  .os-btn--primary:hover:not(:disabled):not(.os-btn--loading) {
    background: var(--color-black); /* Mindstate: Black on hover */
    border-color: var(--color-black);
  }
  
  .os-btn--primary:active:not(:disabled):not(.os-btn--loading) {
    background: var(--ms-dark-gray);
    box-shadow: none;
  }
  
  /* Secondary button */
  /* Mindstate: Data accent colors */
  .os-btn--secondary {
    background: var(--color-white);
    color: var(--ms-data-green); /* Mindstate: Data green text */
    border-color: var(--ms-data-green);
  }
  
  .os-btn--secondary:hover:not(:disabled):not(.os-btn--loading) {
    background: var(--ms-data-green);
    color: var(--color-white);
  }
  
  /* Success button */
  /* Mindstate: Using data blue for success */
  .os-btn--success {
    background: var(--ms-data-blue);
    color: var(--color-white);
    border-color: var(--ms-data-blue);
  }
  
  /* Danger/Error button */
  /* Mindstate: Using data orange for danger */
  .os-btn--danger {
    background: var(--ms-data-orange);
    color: var(--color-white);
    border-color: var(--ms-data-orange);
  }
  
  /* Ghost button (outline style) */
  /* Mindstate: Simple outline button */
  .os-btn--ghost {
    background: transparent;
    color: var(--ms-dark-gray);
    border-color: var(--ms-dark-gray);
    box-shadow: none; /* Mindstate: No shadow for ghost */
  }
  
  .os-btn--ghost:hover:not(:disabled):not(.os-btn--loading) {
    background: var(--color-bg-light);
    color: var(--color-black);
    border-color: var(--color-black);
    transform: translateY(-1px);
    box-shadow: var(--ms-shadow-light);
  }
  
  /* =============================================================================
     Button Sizes
     ============================================================================= */
  
  /* Small button */
  .os-btn--sm {
    min-height: var(--btn-height-sm);
    padding: 0 var(--btn-padding-x-sm);
    font-size: 0.85rem;
  }
  
  /* Large button */
  .os-btn--lg {
    min-height: var(--btn-height-lg);
    padding: 0 var(--btn-padding-x-lg);
    font-size: 1rem;
  }
  
  /* Full width button */
  .os-btn--full {
    width: 100%;
  }
  
  /* =============================================================================
     Button Shapes
     ============================================================================= */
  
  /* Rounded/Pill button */
  /* Mindstate: No rounded corners except circles */
  .os-btn--rounded {
    border-radius: var(--btn-radius-rounded); /* Will be 0 */
  }
  
  /* Icon-only button (circular) */
  /* Mindstate: Keep circular for icon buttons */
  .os-btn--icon {
    width: var(--btn-height);
    padding: 0;
    border-radius: 50%; /* Mindstate: Keep circular */
  }
  
  .os-btn--icon.os-btn--sm {
    width: var(--btn-height-sm);
  }
  
  .os-btn--icon.os-btn--lg {
    width: var(--btn-height-lg);
  }
  
  /* =============================================================================
     Button States
     ============================================================================= */
  
  /* Disabled state */
  .os-btn:disabled,
  .os-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
  
  /* Loading state */
  .os-btn--loading {
    color: transparent;
    cursor: not-allowed;
  }
  
  .os-btn--loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-bg-light);
    border-top-color: var(--ms-data-green); /* Mindstate: Data green loader */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  
  /* =============================================================================
     Button Groups
     ============================================================================= */
  /* Mindstate: Simplified button groups */
  .os-btn-group {
    display: inline-flex;
    gap: 0;
    background: var(--color-bg-light); /* Mindstate: Solid background */
    padding: var(--spacing-xs);
    border-radius: 0; /* Mindstate: Sharp corners */
    border: 1px solid var(--ms-light-grey); /* Mindstate: Light border */
    box-shadow: var(--ms-shadow-light); /* Mindstate: Minimal shadow */
  }
  
  .os-btn-group .os-btn {
    border-radius: 0;
    box-shadow: none;
    border: none; /* Remove individual borders */
  }
  
  .os-btn-group .os-btn:first-child {
    border-radius: 0; /* Mindstate: Sharp corners */
  }
  
  .os-btn-group .os-btn:last-child {
    border-radius: 0; /* Mindstate: Sharp corners */
  }
  
  .os-btn-group .os-btn:not(:last-child) {
    border-right: 1px solid var(--color-divider);
  }
  
  /* =============================================================================
     Specialized Buttons
     ============================================================================= */
  
  /* Copy button */
  .os-btn--copy {
    position: relative;
  }
  
  .os-btn--copy.copied::before {
    content: 'Copied!';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ms-data-green); /* Mindstate: Data green */
    color: var(--color-white);
    padding: 4px 8px;
    border-radius: 0; /* Mindstate: Sharp corners */
    font-size: 0.75rem;
    white-space: nowrap;
    animation: fadeInUp 0.3s ease;
  }
  
  /* Download button */
  .os-btn--download {
    gap: var(--spacing-sm);
  }
  
  .os-btn--download .download-icon {
    font-size: 1.2em;
    animation: bounce 2s infinite;
  }
  
  /* Toggle button */
  /* Mindstate: Simplified toggle state */
  .os-btn--toggle {
    background: var(--color-white);
    border-color: var(--ms-dark-gray);
    box-shadow: none; /* Mindstate: No inset shadow */
  }
  
  .os-btn--toggle.active {
    background: var(--ms-data-green); /* Mindstate: Data green when active */
    color: var(--color-white);
    border-color: var(--ms-data-green);
    box-shadow: var(--ms-shadow-light); /* Mindstate: Minimal shadow */
  }
  
  /* =============================================================================
     Button Icons
     ============================================================================= */
  .os-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
  }
  
  .os-btn__icon--left {
    margin-right: var(--spacing-xs);
  }
  
  .os-btn__icon--right {
    margin-left: var(--spacing-xs);
  }
  
  /* =============================================================================
     Responsive Styles
     ============================================================================= */
  @media (max-width: 768px) {
    .os-btn {
      min-height: var(--btn-height-sm);
      padding: 0 var(--btn-padding-x-sm);
      font-size: 0.85rem;
    }
    
    .os-btn--lg {
      min-height: var(--btn-height);
      padding: 0 var(--btn-padding-x);
      font-size: 0.9rem;
    }
  }
  
  /* =============================================================================
     Migration Helpers
     ============================================================================= */
  .neumorphic-button,
  .button,
  .btn {
    @extend .os-btn;
  }
  
  .neumorphic-button-primary,
  .btn-primary {
    @extend .os-btn--primary;
  }
  
  .download-btn {
    @extend .os-btn;
    @extend .os-btn--primary;
    @extend .os-btn--download;
  }
  
  .copy-button,
  .copy-btn {
    @extend .os-btn;
    @extend .os-btn--copy;
  }