button,
input[type="submit"],
input[type="button"],
[role="button"] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  // Primary button - brand red with skeumorphic depth (default for buttons without variant classes)
  &:not(.secondary):not(.outline):not(.danger) {
    background: linear-gradient(180deg, #ec3750 0%, #d92d46 100%);
    border: 1px solid #c7243c;
    box-shadow: 
      0 2px 6px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    
    @include dark-mode {
      background: linear-gradient(180deg, #f03d58 0%, #dd2f4a 100%);
      border: 1px solid #c62642;
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    }
    
    &:hover:not(:disabled) {
      transform: translateY(-1px);
      background: linear-gradient(180deg, #f04560 0%, #e03348 100%);
      border-color: #c7243c;
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
      
      @include dark-mode {
        background: linear-gradient(180deg, #ff4d68 0%, #f03d58 100%);
        border-color: #dd2f4a;
        box-shadow:
          0 4px 16px rgba(0, 0, 0, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          inset 0 -1px 1px rgba(0, 0, 0, 0.2);
      }
    }
    
    &:active:not(:disabled) {
      transform: translateY(0);
      box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(0, 0, 0, 0.2);
      
      @include dark-mode {
        box-shadow:
          inset 0 3px 6px rgba(0, 0, 0, 0.4),
          inset 0 1px 3px rgba(0, 0, 0, 0.3);
      }
    }
  }

  // Secondary button variant (skeumorphic style)
  &.secondary,
  &.lightswitch-btn,
  &.outline {
    background: #fff linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.04) 100%) !important;
    background-color: #fff !important;
    color: #555 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 
      0 1px 3px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 1px rgba(0, 0, 0, 0.04) !important;
    
    @include dark-mode {
      background: #2c2c2c linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%) !important;
      color: #d0d0d0 !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
      box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 1px rgba(0, 0, 0, 0.3) !important;
    }

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      background: #fcfcfc linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.02) 100%) !important;
      border-color: rgba(0, 0, 0, 0.15) !important;
      box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05) !important;
      
      @include dark-mode {
        background: #333 linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.15) 100%) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        box-shadow: 
          0 4px 12px rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.1),
          inset 0 -1px 1px rgba(0, 0, 0, 0.3) !important;
      }
    }

    &:active:not(:disabled) {
      transform: translateY(0);
      box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
      
      @include dark-mode {
        box-shadow: 
          inset 0 3px 6px rgba(0, 0, 0, 0.5),
          inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
      }
    }

    // Override for delete variant on secondary
    &.delete {
      @include colored-button(#dc2626, #b91c1c, #991b1b, #ef4444, #dc2626, #b91c1c, #ef4444, #dc2626, #f87171, #ef4444);
    }
  }

  // Danger/Delete button variant
  &.danger,
  &.delete {
    @include colored-button(#dc2626, #b91c1c, #991b1b, #ef4444, #dc2626, #b91c1c, #ef4444, #dc2626, #f87171, #ef4444);
  }

  // Approve button variant (green)
  &.approve {
    @include colored-button(#16a34a, #15803d, #166534, #22c55e, #16a34a, #15803d, #22c55e, #16a34a, #4ade80, #22c55e);
  }
}

// Small button size variants
[type="submit"].small {
  width: fit-content !important;
}

.small-btn,
button.small-btn {
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  width: auto !important;
  margin: 0 !important;
}

// Inline button group layout
.inline-buttons {
  display: flex;
  gap: 1rem;
}
